How to Append JavaScript Data to a FormData

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.

The post "How to Append JavaScript Data to a FormData" appeared first on Writech.