Skip to content

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) => {

and we manage the bulk of our logic in the handleImageUpload() function:

const handleImageUpload = (event) => {
  const files =
  const formData = new FormData()
  formData.append('myFile', files[0])

  fetch('/saveImage', {
    method: 'POST',
    body: formData,
    .then((response) => response.json())
    .then((data) => {
    .catch((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:

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

  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)