Skip to content

How to upload a file using Fetch

The Valley of Code

Your Web Development Manual

How to upload files to the server using the Fetch API, explained in a simple way

Thereโ€™s a task that should be simple, but sometimes it leads to hours of research on the Web: uploading files to the server.

In this tutorial I explain you how to do so using fetch.

Given a form with a file 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.

We initialize a new FormData object and we assign it to the formData variable, and we append there the uploaded file. If we have more than one file input element, weโ€™d have more than one append() call.

The data variable inside the second then() will contain the JSON parsed return data. Iโ€™m assuming your server will give you JSON as a response.

See how to handle images uploaded server-side

โ†’ Get my JavaScript Beginner's Handbook
โ†’ Read my JavaScript Tutorials on The Valley of Code
โ†’ Read my TypeScript Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)