How do I set multipart in axios with react

Question

When I curl something  it works fine   curl -L -i -H  x-device-id  abc  -F  url http   clips vorwaerts-gmbh de big buck bunny mp4   http   example com upload   How do I get this to work right with axios  I m using react if that matters   uploadURL  url      return axios post       url   http   example com upload       data          url  url            headers           x-device-id    stuff          Content-Type    multipart form-data                then  response    gt  response data      This doesn t work for some reason

User · Answer

If you are sending alphanumeric data try changing

'Content-Type': 'multipart/form-data'

to

'Content-Type': 'application/x-www-form-urlencoded'

If you are sending non-alphanumeric data try to remove 'Content-Type' at all.

If it still does not work, consider trying request-promise (at least to test whether it is really axios problem or not)

User · Answer

ok  I tried the above two ways but it didnt work for me  After trial and error i came to know that actually the file was not getting saved in  this state file  variable   fileUpload    e    gt        let data   e target files     if e target files 0   null           this props UserAction fileUpload data 0   this fallBackMethod            here fileUpload is a different js file which accepts two params like this  export default  file   callback    gt    const formData   new FormData    formData append  fileUpload   file    return dispatch   gt        axios put BaseUrl RestUrl    ur url   formData           then response   gt                callback response data              catch error   gt             console log           error                 don t forget to bind method in the constructor  Let me know if you need more help in this

User · Answer

Here s how I do file upload in react using axios  import React from  react  import axios    post   from  axios    class SimpleReactFileUpload extends React Component      constructor props        super props       this state          file null           this onFormSubmit   this onFormSubmit bind this      this onChange   this onChange bind this      this fileUpload   this fileUpload bind this         onFormSubmit e       e preventDefault      Stop form submit     this fileUpload this state file  then  response   gt         console log response data                 onChange e        this setState  file e target files 0           fileUpload file       const url    http   example com file-upload       const formData   new FormData        formData append  file  file      const config             headers                 content-type    multipart form-data                      return  post url  formData config         render         return          lt form onSubmit  this onFormSubmit  gt           lt h1 gt File Upload lt  h1 gt           lt input type  file  onChange  this onChange    gt           lt button type  submit  gt Upload lt  button gt         lt  form gt                export default SimpleReactFileUpload   Source

[javascript] How do I set multipart in axios with react?

Examples related to javascript

Examples related to reactjs

Examples related to multipartform-data

Examples related to axios