Next.js 15 fullstack (App Router + Server Actions) · leksjon

Filopplasting med actions

Lær å håndtere filopplastinger direkte gjennom Server Actions, inkludert sikker lagring og behandling.

Leksjon 2 av 311 trinn

Filopplasting med actions er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Laste opp filer med Actions

Filopplasting er en vanlig funksjon som lar brukere dele bilder, dokumenter og mer. Tradisjonelt krevde dette komplekse API-ruter og separate behandlere.

Med Next.js Server Actions blir håndtering av filopplastinger mye enklere og tettere integrert direkte i skjemaene dine, slik at logikken holdes samlet.

Konfigurere filinndata

For å tillate filopplastinger trenger du et HTML-skjema med et bestemt oppsett. Elementet <input type="file"> er nødvendig for å velge filer fra brukerens enhet.

Bruk attributtet name til å identifisere filen i Server Action-en din.
Legg til enctype="multipart/form-data" i <form>-taggen. Dette forteller nettleseren at skjemadataene, inkludert filer, skal kodes riktig.

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

Hente filer via FormData

Når et skjema med enctype="multipart/form-data" sendes inn til en Server Action, tolker Next.js automatisk dataene til et FormData-objekt.

Du kan hente de opplastede filene fra dette FormData-objektet ved hjelp av metoden get(), som returnerer et standard JavaScript-File-objekt.

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

Utforske File-objektet

File-objektet du mottar i Server Action-en din, er et kraftig Web API-objekt. Det gir viktig informasjon om den opplastede filen:

name: Det opprinnelige filnavnet som brukeren oppga.
size: Filstørrelsen i byte.
type: Filens MIME-type (for eksempel "image/jpeg", "application/pdf").
arrayBuffer(): En asynkron metode som henter filens innhold som en ArrayBuffer, noe som er avgjørende når filen skal lagres.

Lagre opplastede filer på disk

For å lagre den opplastede filen permanent må du hente ut innholdet fra File-objektet og skrive det til et lagringssted. Metoden arrayBuffer() hjelper deg med å konvertere filen til rå binærdata.

Deretter kan du bruke Node.js-modulen fs/promises, som er innebygd, til å skrive disse dataene til filsystemet på serveren.

// 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.' };
  }
}

Validere filopplastinger

Det er avgjørende å validere opplastede filer på serversiden for å forhindre sikkerhetssårbarheter og sikre dataintegritet. Kontroller alltid:

Filtype: Kontroller at filens MIME-type er blant de tillatte typene (for eksempel bare bilder, ikke kjørbare filer).
Filstørrelse: Begrens den maksimale størrelsen for å forhindre tjenestenektangrep eller overdreven bruk av lagringsplass.

Validering på klientsiden er nyttig for brukeropplevelsen, men kan omgås. Kontroller på serversiden er derfor obligatoriske.

Implementere validering på serversiden

Slik kan du legge til grunnleggende validering av type og størrelse i Server Action-en din før filen lagres. Dette gjør opplastingsprosessen mye mer robust og sikker.

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

Håndtere flere filopplastinger

Hvis du vil tillate at brukere laster opp flere filer samtidig, legger du ganske enkelt til attributtet multiple i <input type="file">-taggen.

På serveren returnerer formData.getAll('myFiles') en tabell med File-objekter, slik at du kan gå gjennom dem og behandle hver enkelt fil separat.

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

Utover lokal lagring

Selv om lokal lagring passer for utvikling og små prosjekter, bruker produksjonsapplikasjoner ofte skylagringsløsninger for å oppnå skalerbarhet, pålitelighet og sikkerhet.

Populære alternativer omfatter AWS S3, Google Cloud Storage og Cloudinary. Server Actions kan integreres direkte med disse tjenestene ved å sende filens ArrayBuffer til de respektive SDK-ene, noe som gir robuste lagringsmuligheter.

Quiz om filopplasting

Hvilket av følgende HTML-attributter er helt nødvendig for at et grunnleggende skjema skal kunne sende fildata riktig til en Next.js Server Action?

Besvar den i den interaktive leksjonen

Oppsummering og neste steg

Du har lært hvordan du håndterer filopplastinger ved hjelp av Next.js Server Actions!

Sett opp HTML-skjemaer med enctype="multipart/form-data" og <input type="file">.
Hent opplastede filer som File-objekter fra FormData-objektet i Server Actions.
Lagre filer på disk ved hjelp av Node.js fs/promises ved å konvertere innholdet i File-objektet med Buffer.from(await file.arrayBuffer()).
Implementer viktig validering på serversiden av filtyper og filstørrelser for å styrke sikkerheten.
Håndter flere filopplastinger ved å legge til attributtet multiple i inndataelementet og bruke formData.getAll().

Utforsk deretter hvordan du kan tilby optimistiske oppdateringer av brukergrensesnittet for en bedre brukeropplevelse etter en handling!

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Filopplasting med actions» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Filopplasting med actions», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Hva lærer jeg i «Filopplasting med actions»?

Lær å håndtere filopplastinger direkte gjennom Server Actions, inkludert sikker lagring og behandling. Du øver på Next.js 15 fullstack (App Router + Server Actions) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 fullstack (App Router + Server Actions)?

Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.

Hvor lang tid tar leksjonen «Filopplasting med actions»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 fullstack (App Router + Server Actions)-leksjonen?

Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Optimistiske UI-oppdateringer
Filopplasting med actions
Validering og feilhåndtering i Server Actions

← Tilbake til Next.js 15 fullstack (App Router + Server Actions)