How to post a file from a form with Axios

Question

Using raw HTML when I post a file to a flask server using the following I can access files from the flask request global    lt form id  uploadForm  action  upload file  role  form  method  post  enctype multipart form-data gt       lt input type  file  id  file  name  file  gt       lt input type submit value Upload gt   lt  form gt    In flask    def post self       if  file  in request files                 When I try to do the same with Axios the flask request global is empty    lt form id  uploadForm  enctype  multipart form-data  v-on change  uploadFile  gt   lt input type  file  id  file  name  file  gt   lt  form gt   uploadFile  function  event        const file   event target files 0      axios post  upload file   file            headers               Content-Type    multipart form-data                       If I use the same uploadFile function above but remove the headers json from the axios post method I get in the form key of my flask request object a csv list of string values  file is a  csv    How can I get a file object sent via axios

User · Answer

This works for me  I hope helps to someone   var frm       frm    let formData   new FormData frm 0    axios post  your-url   formData       then res   gt            console log  res           catch err   gt            console error  err

User · Answer

If you don t want to use a FormData object  e g  your API takes specific content-type signatures and multipart formdata isn t one of them  then you can do this instead  uploadFile  function  event        const file   event target files 0      axios post  upload file   file            headers               Content-Type   file type

User · Answer

Add the file to a formData object  and set the Content-Type header to multipart form-data   var formData   new FormData    var imagefile   document querySelector   file    formData append  image   imagefile files 0    axios post  upload file   formData        headers           Content-Type    multipart form-data

User · Answer

How to post file using an object in memory  like a JSON object   import axios from  axios   import   as FormData  from  form-data   async function sendData jsonData          const payload   JSON stringify   hello   world         const payload   JSON stringify jsonData       const bufferObject   Buffer from payload   utf-8        const file   new FormData         file append  upload file   bufferObject   quot b json quot         const response   await axios post          lovelyURL          file          headers  file getHeaders         toPromise          console log response  data

User · Answer

Sample application using Vue  Requires a backend server running on localhost to process the request   var app   new Vue     el    app     data        file            methods        submitFile           let formData   new FormData          formData append  file   this file         console log   gt  gt  formData  gt  gt     formData             You should have a server side REST API        axios post  http   localhost 8080 restapi fileupload             formData                headers                   Content-Type    multipart form-data                                      then function                console log  SUCCESS                          catch function                console log  FAILURE                             handleFileUpload           this file   this  refs file files 0         console log   gt  gt  gt  gt  1st element in files array  gt  gt  gt  gt     this file                   https   codepen io pmarimuthu pen MqqaOE

[javascript] How to post a file from a form with Axios

Examples related to javascript

Examples related to ajax

Examples related to file-upload

Examples related to axios