0Pricing
Next.js 15 Fullstack Web Apps · Урок

Загрузка файлов и обработка multipart-форм

Принимайте файлы от пользователей через поле ввода файла, предварительно просматривайте их на клиенте и обрабатывайте multipart-загрузки на сервере с проверкой данных и отображением прогресса.

«Загрузка файлов и обработка multipart-форм» — бесплатный урок Next.js 15 Fullstack Web Apps на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Next.js 15 Fullstack Web Apps, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Next.js 15 Fullstack Web Apps содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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

Reading Selected Files

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

Client-Side Preview

Generate an instant preview without uploading using URL.createObjectURL, which makes a temporary local URL for the file.

const url = URL.createObjectURL(file);
setPreview(url);  // <img src={preview} />

Client-Side Validation

Reject bad files before they leave the browser to save bandwidth and give fast feedback:

  • Check file.type against allowed MIME types
  • Check file.size against a max
if (file.size > 5 * 1024 * 1024) {
  alert('Max 5 MB');
  return;
}

What Is multipart/form-data?

Files cannot ride in JSON. The browser encodes them as multipart/form-data: each field becomes a part with its own headers, and binary file content stays intact.

Building FormData

The FormData object assembles a multipart body programmatically. Append fields and files, then send it with fetch — do not set the Content-Type yourself; the browser adds the boundary.

const fd = new FormData();
fd.append('avatar', file);
fd.append('userId', '42');
await fetch('/api/upload', { method: 'POST', body: fd });

Handling Uploads in Next.js

A Server Action or route handler reads the multipart body. With the Web API, call request.formData() and pull the file out.

export async function POST(req) {
  const form = await req.formData();
  const file = form.get('avatar');
  const bytes = await file.arrayBuffer();
  // save bytes...
  return Response.json({ ok: true });
}

Server-Side Validation

Never trust the client. Re-validate on the server: confirm the MIME type, enforce the size limit, and sanitize the filename to avoid path traversal before writing to disk or storage.

Storing Files

For production, do not store uploads on the app server filesystem (it is ephemeral). Stream them to object storage such as S3 or a managed blob store, and save only the resulting URL in your database.

Upload Progress

To show a progress bar you need byte-level events, which fetch does not expose for uploads. Use XMLHttpRequest and listen to its upload.onprogress event.

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  setPct(Math.round((e.loaded / e.total) * 100));
};
xhr.open('POST', '/api/upload');
xhr.send(fd);

Security Checklist

Safe uploads require:

  • Allowlist of MIME types and extensions
  • Hard size limits enforced server-side
  • Randomized, sanitized stored filenames
  • Never executing or serving uploads from a trusted path

Quick Check

Test your file-upload knowledge.

Recap

You learned to handle uploads end to end:

  • The file input yields a FileList with name, size, type
  • Preview with createObjectURL and validate on the client
  • Send a FormData multipart body; read it with request.formData()
  • Always re-validate server-side, store in object storage, and follow the security checklist

Часто задаваемые вопросы

Урок «Загрузка файлов и обработка multipart-форм» бесплатный?

Да — полный текст урока «Загрузка файлов и обработка multipart-форм» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Next.js 15 Fullstack Web Apps, подпишись на CoddyKit PRO. Курс Next.js 15 Fullstack Web Apps содержит 4 уроков всего.

Чему я научусь в уроке «Загрузка файлов и обработка multipart-форм»?

Принимайте файлы от пользователей через поле ввода файла, предварительно просматривайте их на клиенте и обрабатывайте multipart-загрузки на сервере с проверкой данных и отображением прогресса. Ты практикуешь Next.js 15 Fullstack Web Apps с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Next.js 15 Fullstack Web Apps?

Предыдущий опыт не требуется. Next.js 15 Fullstack Web Apps на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Загрузка файлов и обработка multipart-форм»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Next.js 15 Fullstack Web Apps?

Да. Каждый урок Next.js 15 Fullstack Web Apps включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Управляемые компоненты и состояние
  2. Проверка форм с помощью React Hook Form
  3. Полностековые формы с серверными действиями
  4. Загрузка файлов и обработка multipart-форм
← Назад к Next.js 15 Fullstack Web Apps