Next.js 15 Fullstack Web Apps · Lesson

File Uploads and Multipart Form Handling

Accept files from users with the file input, preview them on the client, and process multipart uploads on the server with validation and progress.

The File Input

Users send files through <input type="file">. Adding multiple allows several files, and accept filters the picker by type.

<input type="file" accept="image/*" multiple />

The input exposes a FileList on its files property. Each File carries the name, size, and MIME type.

function onChange(e) {
  const file = e.target.files[0];
  console.log(file.name, file.size, file.type);
}