multipart/form-data — File Uploads in HTTP

multipart/form-data

multipart/form-data is the MIME type used when an HTML form submits file uploads or mixed binary/text data. It is defined in RFC 7578 and is essential for any web application that handles file uploads.

How It Works

The request body is divided into multiple parts, each separated by a unique boundary string. Each part has its own headers (including Content-Type) and body.

Example HTTP Request

POST /upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxk

------WebKitFormBoundary7MA4YWxk
Content-Disposition: form-data; name="username"

alice
------WebKitFormBoundary7MA4YWxk
Content-Disposition: form-data; name="avatar"; filename="photo.jpg"
Content-Type: image/jpeg

<binary JPEG data>
------WebKitFormBoundary7MA4YWxk--

Key Components

Component	Purpose
boundary	Unique string separating parts
Content-Disposition	Field name and optional filename
Content-Type (per part)	MIME type of each file part

vs application/x-www-form-urlencoded

Feature	form-urlencoded	multipart/form-data
File upload	No	Yes
Binary data	No (must encode)	Yes (raw bytes)
Overhead	Low	Higher (boundaries)
Use case	Simple forms	File uploads

JavaScript Example

const form = new FormData();
form.append("username", "alice");
form.append("avatar", fileInput.files[0]);

fetch("/upload", { method: "POST", body: form });
// Browser sets Content-Type automatically

Important: Do not set the Content-Type header manually when using FormData — the browser adds the boundary parameter automatically.