Post file/blob using multipart formdata ?

See original GitHub issue

In the browser, if I do something like:

    var headers = {Authorization: "Basic " + btoa("user:pass")};
    // Build form data
    var formData = new FormData();
    // File obtained via File API
    formData.append('attachment', file, file.name);
    // Some data as JSON
    formData.append('data', JSON.stringify({foo: "bar"}));
    // Post using GlobalFetch API
    fetch(url, {method: "POST", body: formData, headers: headers})
      .then(...)

The request issued in the browser will have Content-Type:"multipart/form-data; boundary=---------------------------<random-number> and the body will be like:

-----------------------------<random-number>
Content-Disposition: form-data; name="attachment"; filename="velo.jpg"
Content-Type: image/jpeg

ÿØÿà ....

-----------------------------<random-number>
Content-Disposition: form-data; name="data"

{"foo":"bar"}
-----------------------------<random-number>--

I would also work (from the browser) using blobs:

const blob = new Blob([new Uint8Array(array)], {type: "image/jpeg"});
formData.append('attachment', blob, "velo.jpg");

For our integration tests we’re using isomorphic-fetch@2.2.1 and jsdom@9.4.1 and we can’t get obtain the same behavior (content-type and body seem to remain empty). I could not find any existing issue that was specific to multiparts (#30 is about FormData).

Is that something reasonably feasible ? Can we help ?

Thanks a lot!

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:19
  • Comments:5

github_iconTop GitHub Comments

21reactions
gusdaud-zzcommented, Jan 11, 2017

Hey @justinjzs take ‘Content-Type’ out of the headers. The browser should add it automatically (including the boundary).

5reactions
justinjzscommented, Jan 3, 2017
function upload() {
  const formData = new FormData(document.getElementById('myForm'));
  const headers = {
    'Accept': 'application/json, */*',
    'Content-Type': 'multipart/form-data'
  }
  const init = {
    headers,
    method: 'POST',
    body: formData
  };
  fetch('/upload', init).then(res => console.log(res));
}

I try to POST files by that func, but the ‘boundary’ is not in request payload. how should i do? below is the request payload:

------WebKitFormBoundary2gPDSneqBnpU2L4v Content-Disposition: form-data; name=“files”; filename=“fox.jpg” Content-Type: image/jpeg

------WebKitFormBoundary2gPDSneqBnpU2L4v Content-Disposition: form-data; name=“path”

/ ------WebKitFormBoundary2gPDSneqBnpU2L4v–

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to give a Blob uploaded as FormData a file name?
Your best bet is to come up with a file naming scheme of your own and send along with the blob. form.append("filename",getFileName()); form.append("blob...
Read more >
Send blob file via multipart-form-data - GitHub Gist
Send blob file via multipart -form-data. GitHub Gist: instantly share code, notes, and snippets.
Read more >
Using FormData Objects - Web APIs | MDN
Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob , inheriting blob functionality ...
Read more >
Uploading Blobs - Will Schenk
I want a simple service I can deploy that lets me store blobs. I want it to return the hash of the stored...
Read more >
multipart/form-data request pass BLOB files — oracle-tech
and I getting empty response with 200 status code and file is doesn't uploads. Tagged: blob.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found