How do I set multipart in axios with react?

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)=>{      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 (      <form onSubmit={this.onFormSubmit}>        <h1>File Upload</h1>        <input type="file" onChange={this.onChange} />        <button type="submit">Upload</button>      </form>   )  }}export default SimpleReactFileUpload

Source

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)

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) => {    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) => {const formData = new FormData();formData.append('fileUpload', file);return dispatch => {    axios.put(BaseUrl.RestUrl + "ur/url", formData)        .then(response => {            callback(response.data);        }).catch(error => {         console.log("*****  "+error)    });}

}

don't forget to bind method in the constructor. Let me know if you need more help in this.