Uploading Multiple Files Using Formdata()

how to append multiple files input on formdata

You have to pass the value in the form data

$.each($('input[type=file]')[0].files, function(i, value){
    formData.append('file['+i+']', value); // change this to value
});

sample code which I used

$.each($('#upload_screenshot')[0].files,function(key,input){
formData.append('upload_screenshot[]', input);
});

Upload multiple files/images, fetch, formData

Please use unique key while appending multiple files to form data.

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

Why formData does not work with multiple files?

formData.append("images", images);

You need to append each file in turn. FormData doesn't support a FileList object.

for (let i = 0 ; i < images.length ; i++) {
    formData.append("images", images[i]);
}

Multiple files on FormData() append

Try

jQuery.each(jQuery('input[type=file]'), function(i, value) 
{
    data.append('image['+i+']', value.files[0]);
});

How to upload multiple files with additional info inside object

The documentation of the FormData append function shows that it accepts either two or three parameters (the 3rd being optional).

Of the second parameter - value - it says:

The field's value. This can be a USVString or Blob (including
subclasses such as File). If none of these are specified the value is
converted to a string.

Your code tries to pass an object for this parameter, rather than a string or Blob. Therefore FormData is doing exactly what the documentation says it will do that in that situation, and converting that object to a string. [Object object] is what JavaScript always outputs by default if you try to stringify an object directly.

If you wish to append a name for the file specifically, as you can see from the documentation the optional 3rd parameter filename is provided specifically for that purpose.

However if you want to pass some other related property, then you'll need to do that in a separate field in the FormData.

Also you should not append data items with the same name repeatedly - your server may only see the last one. For that to work the most reliable way you should use array syntax e.g. formData.append("files[]"..., so then the server should see an array of data with that name, rather than a single item. You could do the same for these additional properties you want to pass, then you can also pass multiple items and their index number will match with the index number of the file they're related to, when your server receives the POSTed data.

For example, something like this should work better:

for (let i = 0; i < files.length; i++) {
  formData.append('files[]', files[i]);
  formData.append('someOtherProp[]', 'value');
}

Uploading multiple files with Fetch and FormData APIs

The solution was to change files to files[]:

// acceptedFiles are File objects coming from `react-dropzone`.
function handleSubmit(acceptedFiles) {
  const data = new FormData();

  for (const file of acceptedFiles) {
    data.append('files[]', file, file.name);
  }

  return fetch('https://example.com/api/upload', {
    method: 'POST',
    body: data,      
  });
}

How to send multiple files FormData where each file belong to a different FormControl?

Are you sure your file is rightly append to the formData as Blob or Binary?

For an angular solution I don't know what your application looks like but I proposed you to create a formGroup for all your data and maybe create a service to upload your file into the right course module via the formData like your above code with the file in blob

---

Related Topics