# How to upload files with FormData using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jun 6, 2021, updated Jun 8, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-formdata-upload-multiple-files

> A quick guide to learn how to upload single as well as multiple files with FormData using JavaScript.

The [FormData](https://attacomsian.com/blog/javascript-formdata) interface is available in all modern browsers as an HTML5 web API. It can be used to store key-value pairs representing form fields and their values.

Once you construct a `FormData` object, it can be easily sent to the server by using [Fetch API](https://attacomsian.com/blog/uploading-files-using-fetch-api), [XMLHttpRequest](https://attacomsian.com/blog/xhr-node-file-upload) or [Axios](https://attacomsian.com/blog/axios-javascript).

In this article, you'll learn how to upload single or multiple files using `FormData` in JavaScript.

## Uploading Single File

Let us say you have got the following HTML `<input>` element:

```html
<input type="file" id="avatars">
```

Now, we want to make sure that when the user selects a file for upload, it is automatically sent to the server for processing.

Here is an example code that you can use for this purpose:

```javascript
const input = document.querySelector('#avatars');

// Listen for file selection event
input.addEventListener('change', (e) => {
    fileUpload(input.files[0]);
});

// Function that handles file upload using XHR
const fileUpload = (file) => {
    // Create FormData instance
    const fd = new FormData();
    fd.append('avatar', file);

    // Create XHR rquest
    const xhr = new XMLHttpRequest();
    
    // Log HTTP response
    xhr.onload = () => {
        console.log(xhr.response);
    };

    // Send XHR reqeust
    xhr.open('POST', `/upload-avatar`);
    xhr.send(fd);
};
```

## Uploading Multiple Files

The `FormData` interface can also be used to upload multiple files at once. First of all, add the `multiple` attribute to the `<input>` element to allow the user to select more than one files:

```html
<input type="file" id="avatars" multiple>
```

Next, modify the `fileUpload()` method to [iterate over all selected files](https://attacomsian.com/blog/javascript-iterate-filelist) and add then to the `FormData` object:

```javascript
const input = document.querySelector('#avatars');

// Listen for file selection event
input.addEventListener('change', (e) => {
    fileUpload(input.files);
});

// Function that handles file upload using XHR
const fileUpload = (files) => {
    // Create FormData instance
    const fd = new FormData();

    // Iterate over all selected files
    Array.from(files).forEach(file => {
        fd.append('avatar', file);
    });

    // Create XHR rquest
    const xhr = new XMLHttpRequest();

    // Log HTTP response
    xhr.onload = () => {
        console.log(xhr.response);
    };

    // Send XHR reqeust
    xhr.open('POST', `/upload-avatar`);
    xhr.send(fd);
};
```

That's it. The server will receive an array of binary files in the `avatar` request parameter.