JavaScript Academy · Les

Bestanden uploaden met Fetch

Verzend bestanden naar een server met FormData.

Les 4 van 413 stappen

Bestanden uploaden met Fetch is een gratis JavaScript Academy-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 JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Uploaden met fetch

Om bestanden naar een server te sturen, verstuur je met fetch een POST met een FormData-body. De browser verzorgt de codering als multipart/form-data, inclusief de bestandsinhoud.

De FormData opbouwen

Verzamel het bestand uit een invoerveld en voeg het samen met eventuele andere velden toe aan een FormData-object.

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

De basis-POST

Geef de FormData door als de body van een fetch-POST. De respons is een Promise waarop je await kunt gebruiken.

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

Stel Content-Type niet in

Een veelgemaakte fout is Content-Type handmatig instellen. Laat de browser dit doen, omdat de header de multipart-grensreeks moet bevatten. Als je dit zelf instelt, gaat de upload mis.

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

De respons lezen

Controleer response.ok en verwerk de body, vaak JSON, na een geslaagde upload.

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

Fouten afhandelen

Pak de aanroep in in try/catch. Let op: fetch wijst alleen af bij netwerkfouten, dus je moet response.ok controleren op HTTP-foutstatussen.

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

Meerdere bestanden uploaden

Voeg meerdere bestanden met append toe onder dezelfde sleutel, of doorloop een bestandenlijst om ze allemaal toe te voegen.

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

Kopteksten zoals voor authenticatie toevoegen

Je kunt kopteksten toevoegen, zoals Authorization, maar niet Content-Type. De body blijft de FormData.

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

Een gegenereerde Blob versturen

Je kunt ook gegevens uploaden die je in de browser maakt, niet alleen bestanden die je hebt geselecteerd. Voeg een Blob met een bestandsnaam toe om een gegenereerd document te versturen.

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

Een upload afbreken

Gebruik een AbortController om een trage upload te annuleren, bijvoorbeeld wanneer de gebruiker naar een andere pagina gaat.

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

Waarom dit belangrijk is

FormData combineren met fetch is de moderne, standaardmanier om bestanden te uploaden: voeg velden en bestanden toe, verstuur de FormData met POST en laat de browser multipart coderen met de juiste grensreeks. Stel Content-Type niet in, controleer altijd response.ok en ruim gebruikte bronnen op.

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

Korte controle

Waarom moet je de Content-Type-koptekst NIET handmatig instellen wanneer je met fetch een FormData met POST verstuurt?

Beantwoord dit in de interactieve les

Samenvatting: bestanden uploaden met fetch

Je hebt geleerd hoe je bestanden naar een server verstuurt:

Voeg bestanden en velden toe aan een FormData en geef deze vervolgens door als de body van fetch.
Stel Content-Type nooit handmatig in; de browser voegt de multipart-grensreeks toe.
Controleer response.ok, omdat fetch alleen wordt afgewezen bij netwerkfouten.
Je kunt meerdere bestanden en gegenereerde Blobs versturen en uploads annuleren met AbortController.

Gratis beginnen

Leer JavaScript 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: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Bestanden uploaden met Fetch” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Bestanden uploaden met Fetch”, 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 JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Bestanden uploaden met Fetch”?

Verzend bestanden naar een server met FormData. Je oefent met JavaScript Academy 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 JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy 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 “Bestanden uploaden met Fetch”?

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 JavaScript Academy?

Ja. Elke les over JavaScript Academy 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

← Terug naar JavaScript Academy