0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Unggah Berkas dengan Actions

Pelajari cara menangani unggahan berkas langsung melalui Server Actions, termasuk penyimpanan dan pemrosesan yang aman.

Unggah Berkas dengan Actions adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 3 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Uploading Files with Actions

File uploads are a common feature, allowing users to share images, documents, and more. Traditionally, handling these required complex API routes and separate handlers.

With Next.js Server Actions, handling file uploads becomes much simpler and more integrated directly within your forms, keeping your logic co-located.

Setting Up the File Input

To allow file uploads, you need an HTML form with a specific setup. The <input type="file"> element is essential for selecting files from a user's device.

  • Use the name attribute to identify the file in your Server Action.
  • Add enctype="multipart/form-data" to your <form> tag. This tells the browser to encode the form data, including files, correctly.
<form action="/api/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myFile" />
  <button type="submit">Upload</button>
</form>

Capturing Files via FormData

When a form with enctype="multipart/form-data" is submitted to a Server Action, Next.js automatically parses the data into a FormData object.

You can access the uploaded file(s) from this FormData object using its get() method, which returns a standard JavaScript File object.

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

Exploring the File Object

The File object received in your Server Action is a powerful Web API object. It provides key information about the uploaded file:

  • name: The original filename provided by the user.
  • size: The file size in bytes.
  • type: The MIME type of the file (e.g., "image/jpeg", "application/pdf").
  • arrayBuffer(): An asynchronous method to get the file's content as an ArrayBuffer, which is crucial for saving it.

Storing Uploaded Files to Disk

To save the uploaded file permanently, you'll need to extract its content from the File object and write it to a storage location. The arrayBuffer() method helps convert the file into raw binary data.

You can then use Node.js's built-in fs/promises module to write this data to your server's file system.

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

Validating File Uploads

It's crucial to validate uploaded files on the server-side to prevent security vulnerabilities and ensure data integrity. Always check:

  • File Type: Ensure the file's MIME type is among your allowed types (e.g., only images, not executable files).
  • File Size: Limit the maximum size to prevent denial-of-service attacks or excessive storage usage.

Client-side validation is helpful for user experience but can be bypassed, so server-side checks are mandatory.

Implementing Server-Side Validation

Here's how you can add basic type and size validation to your Server Action before saving the file. This makes your upload process much more robust and secure.

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

Handling Multiple File Uploads

To allow users to upload multiple files at once, simply add the multiple attribute to your <input type="file"> tag.

On the server, formData.getAll('myFiles') will return an array of File objects, allowing you to iterate and process each one individually.

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

Beyond Local Storage

While saving files locally is suitable for development and small projects, production applications often use cloud storage solutions for scalability, reliability, and security.

Popular options include AWS S3, Google Cloud Storage, and Cloudinary. Server Actions can integrate directly with these services by sending the file's ArrayBuffer to their respective SDKs, providing robust storage capabilities.

File Upload Quiz

Which of the following HTML attributes is absolutely essential for a basic form to correctly send file data to a Next.js Server Action?

Recap & Next Steps

You've learned how to handle file uploads using Next.js Server Actions!

  • Set up HTML forms with enctype="multipart/form-data" and <input type="file">.
  • Access uploaded files as File objects from the FormData object in your Server Actions.
  • Save files to disk using Node.js fs/promises by converting the File object's content via Buffer.from(await file.arrayBuffer()).
  • Implement crucial server-side validation for file types and sizes to enhance security.
  • Handle multiple file uploads by adding the multiple attribute to the input and using formData.getAll().

Next, explore how to provide optimistic UI updates for a smoother user experience after an action!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Unggah Berkas dengan Actions” gratis?

Ya — teks lengkap “Unggah Berkas dengan Actions” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Unggah Berkas dengan Actions”?

Pelajari cara menangani unggahan berkas langsung melalui Server Actions, termasuk penyimpanan dan pemrosesan yang aman. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Unggah Berkas dengan Actions” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Pembaruan UI Optimistis
  2. Unggah Berkas dengan Actions
  3. Validasi dan Penanganan Kesalahan dalam Server Actions
← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)