How to Append JavaScript Data to a FormData
Tags: api, javascript, programming, softwaredevelopment
Published: 2024-01-19 21:37:32

[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) represents a set of key/value pairs you can send through an [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/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`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects) request.

To build a FormData object, you first have to instantiate it as follows:

```javascript
const formData = new FormData();
```

Then, you can append key/value pairs to it through the [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/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:

```javascript
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:

```javascript
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:

```javascript
// 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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and then append it with:

```javascript
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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://writech.run/blog/how-to-append-javascript-data-to-a-formdata-5d9405bd944e/)" appeared first on [Writech](https://writech.run)._