Summary

I am trying to set my FormData properly using javascript.

I need to be able to upload jpg/png, but I might need to upload some other file types pdf/csv in the future using fetch.

Expected

I expect it to append the data to the form

Error

Working

This snippet is working fine:

const formData = new FormData(document.querySelector('form'));
formData.append("extraField", "This is some extra data, testing");

return fetch('http://localhost:8080/api/upload/multi', {
    method: 'POST',
    body: formData,
});

Not working

const formData = new FormData();
const input = document.querySelector('input[type="file"]');
formData.append('files', input.files);

Question

Does fetch support multiple file upload natively?

Summary

I am trying to set my FormData properly using javascript.

I need to be able to upload jpg/png, but I might need to upload some other file types pdf/csv in the future using fetch.

Expected

I expect it to append the data to the form

Error

Working

This snippet is working fine:

const formData = new FormData(document.querySelector('form'));
formData.append("extraField", "This is some extra data, testing");

return fetch('http://localhost:8080/api/upload/multi', {
    method: 'POST',
    body: formData,
});

Not working

const formData = new FormData();
const input = document.querySelector('input[type="file"]');
formData.append('files', input.files);

Question

Does fetch support multiple file upload natively?

• javascript
• reactjs
• ajax
• upload
• fetch-api

Share Improve this question Follow edited Mar 16, 2022 at 7:01 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Dec 10, 2017 at 12:03 Dimitri KopriwaDimitri Kopriwa 14.5k3333 gold badges117117 silver badges232232 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

If you want multiples file, you can use this

var input = document.querySelector('input[type="file"]')

var data = new FormData()
for (const file of input.files) {
  data.append('files',file,file.name)
}

fetch('http://localhost:8080/api/upload/multi', {
  method: 'POST',
  body: data
})

The issue with your code is in the lineformData.append('files', input.files); Instead of that, you should upload each file running a loop with unique keys, like this

const fileList = document.querySelector('input[type="file"]').files;
    for(var i=0;i<fileList.length;i++) {
    formData.append('file'+i, fileList.item(i));    
}

I have created a simple error fiddle here with your code. You can check its' submitted post data here, where you can see that no file has been uploaded.

At the bottom of the page you can find

.

I have corrected the fiddle here with the fix. You can check its'post data from the server, where it shows the details of the two files that I uploaded.

I mentioned this on a similar question: I had the same problem, but with a PHP backend. The unique formData keys work, but I found that the classic HTML notation worked just fine and simply results in an array on the server.

formData.append('file[]', data[i]);

I like that a lot better, since I can use the same methods to process this as with a classic <input type="file" multiple />.