How to use the FormData object
Find out what is a FormData object and how to use it
The FormData
object is used to store form input fields values.
It’s especially useful when you need to send files to the server.
It’s probably the only time you’ll actually need it.
Here is one example of using FormData to send the content of a file using fetch.
We have an input field:
<input type="file" id="fileUpload" />
We attach a change
event handler on it:
document.querySelector('#fileUpload').addEventListener('change', (event) => {
handleImageUpload(event)
})
and we manage the bulk of our logic in the handleImageUpload()
function:
const handleImageUpload = (event) => {
const files = event.target.files
const formData = new FormData()
formData.append('myFile', files[0])
fetch('/saveImage', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log(data)
})
.catch((error) => {
console.error(error)
})
}
In this example we POST to the /saveImage
endpoint.
You could send more data too by appending it to the formData
object.
In the server-side, to access the file data you must parse the request as a multipart form.
See for example how to upload files in a Next.js form
The FormData object you create has many useful methods:
append()
to add a value to the object, with the specified key. If the key already exists, the value is added to that key, without eliminating the first onedelete()
deletes a key value pairentries()
gives an Iterator object you can loop to list the key value pairs hostedget()
get the value associated with a key. If more than one value was appended, it returns the first onegetAll()
get all the values associated with a keyhas()
returns true if there’s a keykeys()
gives an Iterator object you can loop to list the keys hostedset()
to add a value to the object, with the specified key. If the key already exists, the value is replacedvalues()
gives an Iterator object you can loop to list the values hosted
The FormData object is part of the XMLHttpRequest 2 spec.
It’s available in all the modern browsers and it’s most often used when sending images through fetch.
See how to handle images uploaded server-side
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025