FormData
represents a set of key/value pairs you can send through an XMLHttpRequest. Given a form, you can get its data in FormData
format through the submit()
method. At the same time, keep in mind that you can build a custom FormData
to use it in any multipart/form-data
request.
To build a FormData object, you first have to instantiate it as follows:
const formData = new FormData();
Then, you can append key/value pairs to it through the append()
method.
Let’s learn how to append different types of JavaScript data to a FormData
.
Append a Primitive Value to a FormData Object
To append a primitive data field, such as a string or number, to a FormData object, you can use the append()
method like this:
formData.append('fieldName', 'fieldValue');
Note that FormData
only accepts strings. So, null
and undefined
values should be converted to empty strings or similar before appending them. Also, remember to replace fieldName
with the actual name of your field.
Append an Array to a FormData Object
To append an array to a FormData object, you need to loop through the array and append each value individually using the append()
method as below:
const testArray = ['1', '2', '3']; testArray.forEach((value) => { formData.append('fieldName[]', value); });
Note that the field name must end with []
. Specifically, the FormData
will contain as many fieldName[]
fields as there are values in the array, each referring to a particular value in the array. Thanks to this special syntax, your backend should be able to automatically recognize and convert the fieldName[]
fields into an array called fieldName
containing the array’s data. This syntax trick is required because FormData
supports only flat values.
Append a File to a FormData Object
To append a file to a FormData
, you can use the append()
method and specify the field name, file object, and file name like as below:
// get the file from a <input type="file"> element const fileInput = document.querySelector('input[type="file"]'); const file = fileInput.files[0]; // append the file directly to a FormData formData.append('fieldName', file, file.name);
As you can see, FormData
natively supports files coming from <input type="file">
HTML elements.
Append an Object to a FormData Object
To append a JavaScript object to FormData
, you can convert the object to a Blob using JSON.stringify()
and then append it with:
const objectHere = { 'a': 'fooString', 'b': ['1', '2', '3'] }; formData.append('fieldName', JSON.stringify(testObject));
fieldName
will now contain some data in JSON format. Note the you will have to parse the field on the backend to use its data. For example, in Node.js you could parse it with JSON.parse()
.
Conclusion
In this article, you learned that FormData
is a useful tool for sending data through XMLHttpRequest
. Thanks to the append()
method, you can append primitive data fields, arrays, files, and objects to a FormData
object. Here, you saw how to do it in several examples.
Thanks for reading! I hope you found this article helpful.