JavaScript Upload file

Question

Let s say I have this element on the page    lt input id  image-file  type  file    gt    This will create a button that allows the users of the web page to select a file via an OS  File open     dialog in the browser   Let s say the user clicks said button  selects a file in the dialog  then clicks the  Ok  button to close the dialog   The selected file name is now stored in   document getElementById  image-file   value   Now  let s say that the server handles multi-part POSTs at the URL   upload image    How do I send the file to   upload image    Also  how do I listen for notification that the file is finished uploading

User · Answer

Unless you re trying to upload the file using ajax  just submit the form to  upload image    lt form enctype  multipart form-data  action   upload image  method  post  gt       lt input id  image-file  type  file    gt   lt  form gt    If you do want to upload the image in the background  e g  without submitting the whole form   you can use ajax    Asynchronous file upload  AJAX file upload  using jsp and javascript jQuery Ajax File Upload Ajax using file upload

User · Answer

Pure JS You can use fetch optionally with await-try-catch let photo   document getElementById  quot image-file quot   files 0   let formData   new FormData          formData append  quot photo quot   photo   fetch   upload image    method   quot POST quot   body  formData      x000D   x000D  async function SavePhoto inp         let user     name  john   age 34        let formData   new FormData        let photo   inp files 0                       formData append  photo   photo       formData append  user   JSON stringify user              const ctrl   new AbortController         timeout     setTimeout      gt  ctrl abort    5000            try          let r   await fetch   upload image              method   POST   body  formData  signal  ctrl signal            console log  HTTP response code   r status          catch e           console log  Huston we have problem       e                x000D   lt input id  image-file  type  file  onchange  SavePhoto this    gt   lt br gt  lt br gt  Before selecting the file open chrome console  gt  network tab to see the request details   lt br gt  lt br gt   lt small gt Because in this example we send request to https   stacksnippets net upload image the response code will be 404 ofcourse    lt  small gt    lt br gt  lt br gt   in stack overflow snippets there is problem with error handling  however in  lt a href  https   jsfiddle net Lamik b8ed5x3y 5   gt jsfiddle version lt  a gt  for 404 errors 4xx 5xx are  lt a href  https   stackoverflow com a 33355142 860099  gt not throwing lt  a gt  at all but we can read response status which contains code  x000D   x000D   x000D   Old school approach - xhr let photo   document getElementById  quot image-file quot   files 0       file from input let req   new XMLHttpRequest    let formData   new FormData     formData append  quot photo quot   photo                                   req open  quot POST quot     upload image    req send formData     x000D   x000D  function SavePhoto e         let user     name  john   age 34        let xhr   new XMLHttpRequest        let formData   new FormData        let photo   e files 0                  formData append  user   JSON stringify user           formData append  photo   photo            xhr onreadystatechange   state   gt    console log xhr status        err handling     xhr timeout   5000      xhr open  POST     upload image         xhr send formData     x000D   lt input id  image-file  type  file  onchange  SavePhoto this    gt   lt br gt  lt br gt  Choose file and open chrome console  gt  network tab to see the request details   lt br gt  lt br gt   lt small gt Because in this example we send request to https   stacksnippets net upload image the response code will be 404 ofcourse    lt  small gt    lt br gt  lt br gt   the stack overflow snippets  has some problem with error handling - the xhr status is zero  instead of 404  which is similar to situation when we run script from file on  lt a href  https   stackoverflow com a 10173639 860099  gt local disc lt  a gt  - so I provide also js fiddle version which shows proper http error code  lt a href  https   jsfiddle net Lamik k6jtq3uh 2   gt here lt  a gt   x000D   x000D   x000D   SUMMARY  In server side you can read original file name  and other info  which is automatically included to request by browser in filename formData parameter  You do NOT need to set request header Content-Type to multipart form-data - this will be set automatically by browser  Instead of  upload image you can use full address like http       upload image  If you want to send many files in single request use multiple attribute   lt input multiple type       gt   and attach all chosen files to formData in similar way  e g  photo2    files 2      formData append  quot photo2 quot   photo2    You can include additional data  json  to request e g  let user    name  john   age 34  in this way  formData append  quot user quot   JSON stringify user    You can set timeout  for fetch using AbortController  for old approach by xhr timeout  milisec This solutions should work on all major browsers

[javascript] JavaScript: Upload file

Examples related to javascript

Examples related to file-upload