Sending JSON + Multiple Files in One `multipart/form-data` Request
December 9, 2025โข102 words
Sending JSON + Multiple Files in One "multipart/form-data" Request
Ran into something today while uploading data using multipart/form-data. I needed to send multiple things in the same request:
- a JSON payload, and
- an actual file attachment.
The JSON must be appended as a plain string, while files should use Blob or File.
const formData = new FormData();
// JSON payload
formData.append("payload_json", JSON.stringify(payload));
// Text file
formData.append(
"files[0]",
new Blob([txtContent], { type: "text/plain" }),
"data.txt"
);
formData.append("files[1]", imageBlob, "photo.png");
await fetch("/endpoint", {
method: "POST",
body: formData
});
This structure sends JSON plus multiple file attachments in one request.