CODEWITHSUNDEEP
javascriptreactjsajaxuploadfetch-api
Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14365

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

image

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,
});

image

Not working

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

image

Question

Does fetch support multiple file upload natively?

Upvotes: 2

Views: 3186

Answers (3)

oelna
oelna

Reputation: 2446

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 />.

Upvotes: 0

Alex Montoya
Alex Montoya

Reputation: 5099

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
})

Upvotes: 5

Sandip Ghosh
Sandip Ghosh

Reputation: 719

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

enter image description here.

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.

enter image description here

Upvotes: 3

Related Questions