How do I upload a file with the JS fetch API?

I've done it like this:

var input = document.querySelector('input[type="file"]')var data = new FormData()data.append('file', input.files[0])data.append('user', 'hubot')fetch('/avatars', {  method: 'POST',  body: data})

This is a basic example with comments. The upload function is what you are looking for:

// Select your input type file and store it in a variableconst input = document.getElementById('fileinput');// This will upload the file after having read itconst upload = (file) => {  fetch('http://www.example.net', { // Your POST endpoint    method: 'POST',    headers: {      // Content-Type may need to be completely **omitted**      // or you may need something      "Content-Type": "You will perhaps need to define a content-type here"    },    body: file // This is your file object  }).then(    response => response.json() // if the response is a JSON object  ).then(    success => console.log(success) // Handle the success response object  ).catch(    error => console.log(error) // Handle the error response object  );};// Event handler executed when a file is selectedconst onSelectFile = () => upload(input.files[0]);// Add a listener on your input// It will be triggered when a file will be selectedinput.addEventListener('change', onSelectFile, false);

An important note for sending Files with Fetch API

One needs to omit content-type header for the Fetch request. Then the browser will automatically add the Content type header including the Form Boundary which looks like

Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD

Form boundary is the delimiter for the form data