Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Bestanden uploaden met Actions

Leer bestandsuploads rechtstreeks via Server Actions af te handelen, inclusief veilige opslag en verwerking.

Les 2 van 311 stappen

Bestanden uploaden met Actions is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 2 van 3. 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.

Bestanden uploaden met acties

Het uploaden van bestanden is een veelgebruikte functie waarmee gebruikers afbeeldingen, documenten en meer kunnen delen. Traditioneel waren hiervoor complexe API-routes en afzonderlijke verwerkers nodig.

Met Next.js Server Actions wordt het afhandelen van bestandsuploads veel eenvoudiger en direct in je formulieren geïntegreerd, zodat je logica bij elkaar blijft.

De bestandsinvoer instellen

Om uploads van bestanden mogelijk te maken, heb je een HTML-formulier met een specifieke configuratie nodig. Het element <input type="file"> is essentieel om bestanden op het apparaat van een gebruiker te selecteren.

Gebruik het attribuut name om het bestand in je Server Action te identificeren.
Voeg enctype="multipart/form-data" toe aan je tag <form>. Hiermee geef je de browser opdracht om de formuliergegevens, inclusief bestanden, correct te coderen.

<form action="/api/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myFile" />
  <button type="submit">Upload</button>
</form>

Bestanden vastleggen via FormData

Wanneer een formulier met enctype="multipart/form-data" naar een Server Action wordt verzonden, parseert Next.js de gegevens automatisch naar een object van het type FormData.

Je kunt de geüploade bestanden vanuit dit object FormData ophalen met de methode get(). Deze retourneert een standaard JavaScript-object van het type File.

// app/actions.js
'use server';

export async function uploadFile(formData) {
  const file = formData.get('myFile');
  if (!file) {
    return { error: 'No file uploaded.' };
  }
  // 'file' is a File object
  console.log('File name:', file.name);
  console.log('File size:', file.size, 'bytes');
  console.log('File type:', file.type);
  return { success: true };
}

Het File-object verkennen

Het object File dat je Server Action ontvangt, is een krachtig object uit de Web API. Het biedt belangrijke informatie over het geüploade bestand:

name: De oorspronkelijke bestandsnaam die door de gebruiker is opgegeven.
size: De grootte van het bestand in bytes.
type: Het MIME-type van het bestand, bijvoorbeeld "image/jpeg" of "application/pdf".
arrayBuffer(): Een asynchrone methode om de inhoud van het bestand op te halen als een ArrayBuffer. Dit is essentieel om het bestand op te slaan.

Geüploade bestanden op schijf opslaan

Om het geüploade bestand permanent op te slaan, moet je de inhoud uit het object File halen en naar een opslaglocatie schrijven. De methode arrayBuffer() helpt je het bestand om te zetten naar onbewerkte binaire gegevens.

Vervolgens kun je de ingebouwde Node.js-module fs/promises gebruiken om deze gegevens naar het bestandssysteem van je server te schrijven.

// app/actions.js (continued)
'use server';
import { writeFile } from 'fs/promises';
import path from 'path';

export async function saveUploadedFile(formData) {
  const file = formData.get('myFile');
  if (!file || file.size === 0) return { error: 'No file.' };

  const buffer = Buffer.from(await file.arrayBuffer());
  const filename = Date.now() + '-' + file.name; // Unique filename
  const filePath = path.join(process.cwd(), 'public/uploads', filename);

  try {
    await writeFile(filePath, buffer);
    console.log('File saved to:', filePath);
    return { success: true, filename };
  } catch (error) {
    console.error('Error saving file:', error);
    return { error: 'Failed to save file.' };
  }
}

Bestandsuploads valideren

Het is cruciaal om geüploade bestanden aan de serverzijde te valideren om beveiligingsproblemen te voorkomen en de integriteit van de gegevens te waarborgen. Controleer altijd:

Bestandstype: Controleer of het MIME-type van het bestand tot de toegestane typen behoort, bijvoorbeeld alleen afbeeldingen en geen uitvoerbare bestanden.
Bestandsgrootte: Beperk de maximale grootte om denial-of-service-aanvallen of overmatig gebruik van opslagruimte te voorkomen.

Validatie aan de clientzijde helpt de gebruikerservaring, maar kan worden omzeild. Controles aan de serverzijde zijn daarom verplicht.

Validatie aan de serverzijde implementeren

Zo voeg je vóór het opslaan van het bestand een eenvoudige validatie van het type en de grootte toe aan je Server Action. Hierdoor wordt je uploadproces veel robuuster en veiliger.

// app/actions.js (validation added)
'use server';
import { writeFile } from 'fs/promises';
import path from 'path';

const MAX_FILE_SIZE = 1024 * 1024 * 5; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'application/pdf'];

export async function validateAndSaveFile(formData) {
  const file = formData.get('myFile');
  if (!file || file.size === 0) return { error: 'No file.' };

  if (file.size > MAX_FILE_SIZE) {
    return { error: 'File too large (max 5MB).' };
  }
  if (!ALLOWED_TYPES.includes(file.type)) {
    return { error: 'Invalid file type.' };
  }

  const buffer = Buffer.from(await file.arrayBuffer());
  const filename = Date.now() + '-' + file.name;
  const filePath = path.join(process.cwd(), 'public/uploads', filename);

  await writeFile(filePath, buffer);
  return { success: true, filename };
}

Meerdere bestanden uploaden

Als je gebruikers meerdere bestanden tegelijk wilt laten uploaden, voeg je eenvoudig het attribuut multiple toe aan je tag <input type="file">.

Op de server retourneert formData.getAll('myFiles') een array met objecten van het type File, zodat je elk bestand afzonderlijk kunt doorlopen en verwerken.

// HTML for multiple files:
<form action="/api/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myFiles" multiple />
  <button type="submit">Upload</button>
</form>

// Server Action for multiple files:
'use server';

export async function uploadMultipleFiles(formData) {
  const files = formData.getAll('myFiles');
  if (!files || files.length === 0) return { error: 'No files.' };

  const uploadedNames = [];
  for (const file of files) {
    // Perform validation and saving for each file
    console.log('Processing file:', file.name);
    uploadedNames.push(file.name);
  }
  return { success: true, uploadedNames };
}

Verder dan lokale opslag

Hoewel lokaal opslaan geschikt is voor ontwikkeling en kleine projecten, gebruiken productietoepassingen vaak cloudopslagoplossingen vanwege de schaalbaarheid, betrouwbaarheid en beveiliging.

Populaire opties zijn AWS S3, Google Cloud Storage en Cloudinary. Server Actions kunnen rechtstreeks met deze services integreren door de ArrayBuffer van het bestand naar hun respectievelijke SDK's te sturen. Zo krijg je robuuste opslagmogelijkheden.

Kennistoets over bestandsuploads

Welk HTML-attribuut is absoluut essentieel om bestandsgegevens vanuit een basisformulier correct naar een Next.js Server Action te verzenden?

Beantwoord dit in de interactieve les

Samenvatting en volgende stappen

Je hebt geleerd hoe je bestandsuploads afhandelt met Next.js Server Actions!

Stel HTML-formulieren in met enctype="multipart/form-data" en <input type="file">.
Haal geüploade bestanden als objecten van het type File op uit het object FormData in je Server Actions.
Sla bestanden op schijf op met Node.js fs/promises door de inhoud van het object File om te zetten via Buffer.from(await file.arrayBuffer()).
Implementeer essentiële validatie aan de serverzijde voor bestandstypen en -grootten om de beveiliging te verbeteren.
Verwerk meerdere bestandsuploads door het attribuut multiple aan de invoer toe te voegen en formData.getAll() te gebruiken.

Ontdek hierna hoe je optimistische updates van de gebruikersinterface kunt bieden voor een soepelere gebruikerservaring na een actie!

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: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Bestanden uploaden met Actions” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Bestanden uploaden met Actions”, 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.

Wat leer ik in “Bestanden uploaden met Actions”?

Leer bestandsuploads rechtstreeks via Server Actions af te handelen, inclusief veilige opslag en verwerking. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 2 van 3.

Hoe lang duurt de les “Bestanden uploaden met Actions”?

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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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

Optimistische UI-updates
Bestanden uploaden met Actions
Validatie en foutafhandeling in Server Actions

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)