0PricingLogin▼
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

File Uploads with Actions

Learn to handle file uploads directly through Server Actions, including secure storage and processing.

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>

All lessons in this course

  1. Optimistic UI Updates
  2. File Uploads with Actions
  3. Validation & Error Handling in Server Actions
← Back to Next.js 15 Fullstack (App Router + Server Actions)