How to Append JavaScript Data to FormData

FormData represents a collection of key-value pairs that can be transmitted using an XMLHttpRequest. When dealing with a form, you can obtain its data in FormData format by utilizing the submit() method. Additionally, it's worth noting that you can construct a custom FormData object for use in any request with a [multipart/form-data](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using%5FFormData%5FObjects) content type.

To create a FormData object, you should initiate it as follows:

const formData = new FormData();

Subsequently, you can append key-value pairs to it via the [append()](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) method. Now, let's explore how to append various types of JavaScript data to a FormData.

Appending a Primitive Value to a FormData Object

To attach a primitive data field, like a string or number, to a FormData object, employ the append() method as shown below:

formData.append("fieldName", "fieldValue");

It's crucial to note that FormData exclusively accepts strings. Consequently, null and undefined values should be converted into empty strings or equivalent representations before appending. Furthermore, remember to replace fieldName with the actual field name.

Appending an Array to a FormData Object

To append an array to a FormData object, iterate through the array and append each value individually utilizing the append() method, as demonstrated here:

const testArray = ["1", "2", "3"];

testArray.forEach((value) => {
  formData.append("fieldName[]", value);
});

Please observe that the field name should conclude with []. Specifically, the FormData will contain as many fieldName[] fields as there are values in the array, with each field referring to a specific value in the array. Thanks to this unique syntax, your backend should automatically identify and transform the fieldName[] fields into an array named fieldName that holds the array's data. This syntax workaround is necessary because FormData solely supports flat values.

Appending a File to a FormData Object

To add a file to a FormData object, utilize the append() method and specify the field name, file object, and file name as shown below:

// Obtain the file from an <input type="file"> element
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

// Append the file directly to a FormData object
formData.append("fieldName", file, file.name);

As illustrated, FormData inherently accommodates files sourced from <input type="file"> HTML elements.

Appending an Object to a FormData Object

To append a JavaScript object to a FormData object, you can transform the object into a Blob utilizing [JSON.stringify()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/JSON/stringify) and then append it using the following approach:

const objectHere = {
  a: "fooString",
  b: ["1", "2", "3"],
};
formData.append("fieldName", JSON.stringify(testObject));

Now, fieldName contains data in JSON format. Keep in mind that you will need to parse the field on the backend to access its data. For instance, in Node.js, you can parse it using [JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/JSON/parse).

Conclusion

In this article, you gained insights into the utility of FormData for transmitting data via XMLHttpRequest. The append() method facilitates the attachment of primitive data fields, arrays, files, and objects to a FormData object. You've seen how to do this through several examples.