Endpoint BayISSUE #12 of 45

form data · multipart · urlencoded

RestaVSThe 401 Bandit

Resta saysForm data comes in two encodings: urlencoded for simple fields, multipart for file uploads.

HTML forms send data as application/x-www-form-urlencoded (key=value pairs, like a query string) or multipart/form-data (required for file uploads, each field in its own part). In JS, a FormData object handles both — and when you pass it to fetch, the browser sets the correct Content-Type (including the multipart boundary) automatically.

Power-ups you unlock

urlencoded: simple key=value fields
multipart/form-data: required for files
FormData handles both in JS
Let the browser set multipart Content-Type

The 401 Bandit attacks — common mistakes

Manually setting Content-Type for FormData (breaks boundary)
urlencoded for file uploads (fails)
Forgetting to name form fields

Boss battleBuild a FormData with a text field and a file, ready for a fetch POST.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>const fd = new FormData();
fd.append('title', 'photo');
fd.append('file', fileInput.files[0]);
await fetch('/upload', { method:'POST', body: fd });
// browser sets multipart Content-Type + boundary</pre></body></html>

▶ Open the interactive comic issue

‹ Xml · The Legacy Lingua Franca Rest · The Architectural Style ›