Next.js 15 Fullstack Web Apps · Leçon

Téléversement de fichiers et traitement des formulaires multipart

Téléversement de fichiers et traitement des formulaires multipart est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

The File Input

Users send files through <input type="file">. Adding multiple allows several files, and accept filters the picker by type.

<input type="file" accept="image/*" multiple />

Reading Selected Files

The input exposes a FileList on its files property. Each File carries the name, size, and MIME type.

function onChange(e) {
  const file = e.target.files[0];
  console.log(file.name, file.size, file.type);
}

Client-Side Preview

Generate an instant preview without uploading using URL.createObjectURL, which makes a temporary local URL for the file.

const url = URL.createObjectURL(file);
setPreview(url);  // <img src={preview} />

Client-Side Validation

Reject bad files before they leave the browser to save bandwidth and give fast feedback:

Check file.type against allowed MIME types
Check file.size against a max

if (file.size > 5 * 1024 * 1024) {
  alert('Max 5 MB');
  return;
}

What Is multipart/form-data?

Files cannot ride in JSON. The browser encodes them as multipart/form-data: each field becomes a part with its own headers, and binary file content stays intact.

Building FormData

The FormData object assembles a multipart body programmatically. Append fields and files, then send it with fetch — do not set the Content-Type yourself; the browser adds the boundary.

const fd = new FormData();
fd.append('avatar', file);
fd.append('userId', '42');
await fetch('/api/upload', { method: 'POST', body: fd });

Handling Uploads in Next.js

A Server Action or route handler reads the multipart body. With the Web API, call request.formData() and pull the file out.

export async function POST(req) {
  const form = await req.formData();
  const file = form.get('avatar');
  const bytes = await file.arrayBuffer();
  // save bytes...
  return Response.json({ ok: true });
}

Server-Side Validation

Never trust the client. Re-validate on the server: confirm the MIME type, enforce the size limit, and sanitize the filename to avoid path traversal before writing to disk or storage.

Storing Files

For production, do not store uploads on the app server filesystem (it is ephemeral). Stream them to object storage such as S3 or a managed blob store, and save only the resulting URL in your database.

Upload Progress

To show a progress bar you need byte-level events, which fetch does not expose for uploads. Use XMLHttpRequest and listen to its upload.onprogress event.

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  setPct(Math.round((e.loaded / e.total) * 100));
};
xhr.open('POST', '/api/upload');
xhr.send(fd);

Security Checklist

Safe uploads require:

Allowlist of MIME types and extensions
Hard size limits enforced server-side
Randomized, sanitized stored filenames
Never executing or serving uploads from a trusted path

Quick Check

Test your file-upload knowledge.

Recap

You learned to handle uploads end to end:

The file input yields a FileList with name, size, type
Preview with createObjectURL and validate on the client
Send a FormData multipart body; read it with request.formData()
Always re-validate server-side, store in object storage, and follow the security checklist

Questions Fréquemment Posées

La leçon « Téléversement de fichiers et traitement des formulaires multipart » est-elle gratuite ?

Oui — le texte complet de « Téléversement de fichiers et traitement des formulaires multipart » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Téléversement de fichiers et traitement des formulaires multipart » ?

Acceptez les fichiers envoyés par les utilisateurs avec le champ de saisie de fichier, prévisualisez-les côté client et traitez les téléversements multipart côté serveur avec validation et suivi de l… Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Téléversement de fichiers et traitement des formulaires multipart » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?

Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Composants contrôlés et état
Validation des formulaires avec React Hook Form
Formulaires fullstack avec les actions serveur
Téléversement de fichiers et traitement des formulaires multipart

← Retour à Next.js 15 Fullstack Web Apps