Fullstackwebapps met Next.js 15 · Les

Bestandsuploads en multipart-formulierverwerking

Accepteer bestanden van gebruikers met het file input-element, geef er aan de clientzijde een voorbeeld van weer en verwerk multipart-uploads op de server met validatie en voortgangsweergave.

Les 4 van 413 stappen

Bestandsuploads en multipart-formulierverwerking is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

De bestandsinvoer

Gebruikers sturen bestanden via <input type="file">. Met multiple zijn meerdere bestanden toegestaan en met accept filter je de bestandskiezer op type.

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

Geselecteerde bestanden lezen

De invoer stelt een FileList beschikbaar via de eigenschap files. Elk File bevat de naam, grootte en MIME-type.

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

Voorbeeld aan de clientkant

Genereer zonder uploaden meteen een voorbeeld met URL.createObjectURL. Hiermee maak je een tijdelijke lokale URL voor het bestand.

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

Validatie aan de clientkant

Wijs ongeldige bestanden af voordat ze de browser verlaten, zodat je bandbreedte bespaart en snel feedback kunt geven:

Controleer file.type tegen toegestane MIME-typen
Controleer file.size tegen een maximum

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

Wat is multipart/form-data?

Bestanden kunnen niet in JSON worden meegestuurd. De browser codeert ze als multipart/form-data: elk veld wordt een onderdeel met eigen headers en de binaire bestandsinhoud blijft intact.

FormData opbouwen

Het object FormData stelt programmatisch een multipart-body samen. Voeg velden en bestanden toe en stuur die daarna met fetch — stel Content-Type niet zelf in; de browser voegt de grens toe.

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

Uploads verwerken in Next.js

Een Server Action of routehandler leest de multipart-body. Gebruik de Web API en roep request.formData() aan om het bestand eruit te halen.

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 });
}

Validatie aan de serverkant

Vertrouw de client nooit. Valideer opnieuw op de server: controleer het MIME-type, dwing de maximale grootte af en maak de bestandsnaam veilig om padmanipulatie te voorkomen voordat je naar schijf of opslag schrijft.

Bestanden opslaan

Sla uploads in productie niet op in het bestandssysteem van de appserver; dat is tijdelijk. Stream ze naar objectopslag zoals S3 of een beheerde blobopslag en bewaar alleen de resulterende URL in je database.

Uploadvoortgang

Voor een voortgangsbalk heb je gebeurtenissen op byteniveau nodig, maar fetch biedt die niet voor uploads. Gebruik XMLHttpRequest en luister naar de gebeurtenis upload.onprogress.

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

Beveiligingscontrolelijst

Veilige uploads vereisen:

Een allowlist van MIME-typen en extensies
Harde groottelimieten die aan de serverkant worden afgedwongen
Gerandomiseerde, opgeschoonde opgeslagen bestandsnamen
Uploads nooit uitvoeren of aanbieden vanuit een vertrouwd pad

Korte controle

Test je kennis van bestandsuploads.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt geleerd uploads van begin tot eind te verwerken:

De bestandsinvoer levert een FileList met naam, grootte en type
Maak een voorbeeld met createObjectURL en valideer aan de clientkant
Stuur een multipart-body met FormData en lees die met request.formData()
Valideer altijd opnieuw aan de serverkant, sla op in objectopslag en volg de beveiligingscontrolelijst

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Bestandsuploads en multipart-formulierverwerking” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Bestandsuploads en multipart-formulierverwerking”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “Bestandsuploads en multipart-formulierverwerking”?

Accepteer bestanden van gebruikers met het file input-element, geef er aan de clientzijde een voorbeeld van weer en verwerk multipart-uploads op de server met validatie en voortgangsweergave. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Bestandsuploads en multipart-formulierverwerking”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Gecontroleerde componenten en state
Formuliervalidatie met React Hook Form
Fullstackformulieren met Server Actions
Bestandsuploads en multipart-formulierverwerking

← Terug naar Fullstackwebapps met Next.js 15