Developer Toolbox

multipart/form-data

A multipart/form-data body is a list of parts, one per form field, each with its own headers and separated by a boundary string that the sender picks and announces in the Content-Type header. It is the standard form encoding that can carry files (RFC 7578).

Open in cURL Builder A request with this type is filled in.

Header

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

At a glance

Extensions
None: it describes a body, not a file
Kind
Binary
Parameters
boundary (required): a string that occurs in none of the parts.
In a browser
Browsers send it rather than display it. A form with a file input needs enctype="multipart/form-data".

With curl

curl https://api.example.com/upload \
  -F 'name=Ada' \
  -F '[email protected]'

With fetch

const body = new FormData();
body.append('name', 'Ada');
body.append('photo', fileInput.files[0]);

// No Content-Type: fetch sets it, with the boundary.
await fetch('https://api.example.com/upload', { method: 'POST', body });

Common mistakes

  • Setting Content-Type by hand

    With fetch or axios and a FormData body, a header written as plain multipart/form-data has no boundary, and the server cannot split the parts. Leave the header out and let the library set it.

  • -F and -d in curl

    -F builds a multipart body; -d sends application/x-www-form-urlencoded, and curl refuses a command that mixes them. -d @file sends the file's text as the body, not the file as an upload.

  • Size limits answer 413

    Servers and proxies cap request bodies (nginx's client_max_body_size is 1 MB by default). A larger upload gets 413 Content Too Large before your code sees it.