0Pricing
JavaScript Academy · Lesson

Uploading Files with Fetch

Send files to a server with FormData.

Uploading With fetch

To send files to a server, you POST a FormData body with fetch. The browser handles the multipart/form-data encoding for you, including file contents.

Building the FormData

Collect the file from an input and append it, along with any other fields, to a FormData object.

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

All lessons in this course

  1. The FormData Object
  2. Reading Files with FileReader
  3. Blobs and Object URLs
  4. Uploading Files with Fetch
← Back to JavaScript Academy