How to upload a file using the JS fetch API?

Question

I'm still trying to wrap my head around this.

I can suggest the user to select a file (or even several) by entering the file:

<form> <div> <label>Select file to upload</label> <input type="file"> </div> <button type="submit">Convert</button> </form> 

And I can catch the submit event using <fill in your event handler here> . But as soon as I do this, how do I send a file using fetch ?

 fetch('/files', { method: 'post', // what goes here? What is the "body" for this? content-type header? }).then(/* whatever */); 

Answer 1

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 variable const input = document.getElementById('fileinput'); // This will upload the file after having read it const 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 selected const onSelectFile = () => upload(input.files[0]); // Add a listener on your input // It will be triggered when a file will be selected input.addEventListener('change', onSelectFile, false); 

Answer 2

I did 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 }) 

Answer 3

Important note for sending files using the Fetch API

You need to skip the content-type header for the Fetch request. Then the browser will automatically add a Content type header including the border of the form, which looks like

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

A form border is a separator for form data.

Answer 4

If you want a multiple file, you can use this

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

Answer 5

To send a single file, you can simply use the File object from the input the .files array directly as the value of body: in the fetch() initializer:

 const myInput = document.getElementById('my-input'); // Later, perhaps in a form 'submit' handler or the input 'change' handler: fetch('https://example.com/some_endpoint', { method: 'POST', body: myInput.files[0], }); 

This works because File inherits from Blob and Blob is one of the valid BodyInit types defined in the Fetch standard.

Answer 6

Jumps from Alex Montoya's approach for multiple file entry elements

 const inputFiles = document.querySelectorAll('input[type="file"]'); const formData = new FormData(); for (const file of inputFiles) { formData.append(file.name, file.files[0]); } fetch(url, { method: 'POST', body: formData }) 

Answer 7

The problem for me was that I used response.blob () to populate the form data. Apparently, you cannot do this, at least with responsive native, so I ended up using

 data.append('fileData', { uri : pickerResponse.uri, type: pickerResponse.type, name: pickerResponse.fileName }); 

Fetch seems to recognize this format and sends the file where the URI points to.