Why is FormData.set turning my array into a string?

Question

I have a form with a field that has multi-select enabled. I'm able to get the form data and see the array containing all the files that were selected via the file field.

I'm trying to replace the file array with my selected_files array that I have modified, but when I use FormData.set, it is setting my array as a string it looks like. Please see the below example.

var form = new FormData(document.getElementById("asset-create-form"));
var files = form.getAll('file')
// file field has multiselect enabled so enduser can select more than one file
console.log(files)
>> [File, File, File, File, File] (5)
console.log(selected_files)
>> [File, File, File, File, File] (5)
form.set('file', selected_files)
new_files = form.getAll('file')
console.log(new_files)
>> ["[object File],[object File],[object File],[object File],[object File]"] (1)

Why is this a string? How can I set my selected_files array to the file field?

If the set function can only set to a variable, then is there a workaround?

Does this answer your question? How use formData.append for a array in typescript — Heretic Monkey
– Heretic Monkey, Commented Apr 1, 2021 at 19:33
Is your question answered? If not, please comment accordingly. If yes, please pick an answer. If it was helpful, consider an upvote. — connexo
– connexo, Commented Apr 1, 2021 at 20:12

connexo · Accepted Answer · 2021-04-01 19:41:15Z

0

If the sent value is different than String or Blob it will be automatically converted to String.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/set#example

The array you're trying to set is neither String nor Blob, so it it converted.

In other words: The only values FormData can hold is String (any regular form field) and Blob (input type=file), meaning form data cannot hold other data types such as arrays, numbers, booleans, null, objects etc.

As for your second question, simply use FormData.prototype.append in a loop:

var form = new FormData(document.getElementById("asset-create-form"));
form.delete('file'); // delete the files already in the form data
selected_files.forEach(file => form.append('file', file));

edited Apr 1, 2021 at 19:41

answered Apr 1, 2021 at 19:24

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Benjamin Donnaloia Over a year ago

but then why does console.log(files) return an array with all the selected files in it

connexo Over a year ago

Consider reading the basic documentation before asking on StackOverflow. developer.mozilla.org/en-US/docs/Web/API/FormData/… [getAll] Returns an array of FormDataEntryValues whose key matches the value passed in the name parameter.

connexo Over a year ago

Where is selectedFiles retrieved from? How does it relate to files?

Benjamin Donnaloia Over a year ago

selectedFiles is an array structured the same as the files array

connexo Over a year ago

Any you want to fully replace whatever form data with key file is already there?

|

Collectives™ on Stack Overflow

Why is FormData.set turning my array into a string?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related