{
  "id": 17362387,
  "title": "Let the browser set the multipart boundary for an image upload",
  "url": "https://urgent.news/2026/10/31/let-the-browser-set-the-multipart-boundary-for-an-image-upload",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-31T07:41:15.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/morphio/let-the-browser-set-the-multipart-boundary-for-an-image-upload-444f"
  },
  "original_language": "en",
  "account": "When using the fetch() method with FormData for uploading an image, it is important not to manually set the Content-Type header. The browser will automatically add the necessary multipart boundary for the image upload. To implement this, create a new FormData object, append the image file to it, and then pass the FormData object as the request body. Manually specifying Content-Type: multipart/form-data will remove the boundary that the browser typically adds.\n\nBefore attributing any issues to the image bytes, it is recommended to examine a shared request helper for an unconditional JSON or multipart header. Other than that, include any necessary authorization headers that your application requires.\n\nTo troubleshoot the issue, utilize a small non-sensitive test image. Utilize the MDN FormData guide to understand the boundary requirement. When submitting a bug report, specify the body type and header construction without including any sensitive information like credentials. The information provided here pertains to image preparation and review for the Morphio image project, which can be found at https://morphio.online/.",
  "summary": "Leave Content-Type unset in the request options when fetch() sends FormData . The browser adds the multipart boundary needed by that body. Build the form with const data = new FormData(); data.append(\"image\", file); and pass it as the request body. A manually supplied Content-Type: multipart/form-data omits the boundary that the browser normally adds. Apply this rule to requests whose body is…",
  "key_points": [
    "Browser automatically adds multipart boundary for image upload.",
    "Create FormData object and append image file to it.",
    "Manually specifying Content-Type removes browser's added boundary."
  ],
  "editors_take": "Automating the multipart boundary through the browser simplifies image upload implementations and prevents common developer errors caused by manually overriding essential content-type headers during fetch requests.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}