How do I upload a file with the JS fetch API

Question

I am still trying to wrap my head around it   I can have the user select the file  or even multiple  with the file input    lt form gt     lt div gt       lt label gt Select file to upload lt  label gt       lt input type  file  gt     lt  div gt     lt button type  submit  gt Convert lt  button gt   lt  form gt    And I can catch the submit event using  lt fill in your event handler here gt   But once I do  how do I send the file using fetch   fetch   files       method   post        what goes here  What is the  body  for this  content-type header     then    whatever

User · Answer

Jumping off from Alex Montoya s approach for multiple file input 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

User · Answer

Here is my code    html     x000D   x000D  const upload    file    gt    x000D      console log file   x000D   x000D       x000D   x000D      fetch  http   localhost 8080 files uploadFile      x000D      method   POST   x000D         headers    x000D              Content-Disposition    attachment  name  file   filename  xml2 txt    x000D            Content-Type    multipart form-data  boundary BbC04y      multipart mixed boundary gc0p4Jq0M2Yt08jU534c0p           multipart form-data  x000D            x000D      body  file    This is your file object x000D       then  x000D      response   gt  response json      if the response is a JSON object x000D      then  x000D      success   gt  console log success     Handle the success response object x000D      catch  x000D      error   gt  console log error     Handle the error response object x000D       x000D   x000D      cvForm submit    x000D     x000D   x000D  const onSelectFile        gt  upload uploadCvInput files 0    x000D   x000D  uploadCvInput addEventListener  change   onSelectFile  false   x000D   lt form id  cv form  style  display  none   x000D            enctype  multipart form-data  gt  x000D             lt input id  uploadCV  type  file  name  file   gt  x000D             lt button type  submit  id  upload btn  gt upload lt  button gt  x000D   lt  form gt  x000D   lt ul class  dropdown-menu  gt  x000D   lt li class  nav-item  gt  lt a class  nav-link  href     id  upload  gt UPLOAD CV lt  a gt  lt  li gt  x000D   lt li class  nav-item  gt  lt a class  nav-link  href     id  download  gt DOWNLOAD CV lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    gt      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   gt  response json      if the response is a JSON object     then      success   gt  console log success     Handle the success response object     catch      error   gt  console log error     Handle the error response object             Event handler executed when a file is selected const onSelectFile        gt  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

User · Answer

The problem for me was that I was using a response blob   to populate the form data  Apparently you can t do that at least with react native so I ended up using   data append  fileData       uri   pickerResponse uri    type  pickerResponse type    name  pickerResponse fileName        Fetch seems to recognize that format and send the file where the uri is pointing

User · Answer

The accepted answer here is a bit dated  As of April 2020  a recommended approach seen on the MDN website suggests using FormData and also does not ask to set the content type  https   developer mozilla org en-US docs Web API Fetch API Using Fetch  I m quoting the code snippet for convenience   const formData   new FormData    const fileField   document querySelector  input type  file       formData append  username    abc123    formData append  avatar   fileField files 0     fetch  https   example com profile avatar       method   PUT     body  formData     then  response    gt  response json     then  result    gt      console log  Success    result       catch  error    gt      console error  Error    error

User · Answer

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

User · Answer

If you want multiple files  you can use this var input   document querySelector  input type  quot file quot      var data   new FormData   for  const file of input files      data append  files  file file name     fetch   avatars       method   POST     body  data

User · Answer

To submit a single file  you can simply use the File object from the input s  files array directly as the value of body  in your fetch   initializer   const myInput   document getElementById  my-input        Later  perhaps in a form  submit  handler or the input s  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 permissible BodyInit types defined in the Fetch Standard

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

Examples related to javascript

Examples related to fetch-api