close

How do I set multipart in axios with react?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How do I set multipart in axios with react? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How do I set multipart in axios with react?

  1. How do I set multipart in axios with react?

    do I set multipart in axios with react 'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'multipart/form-data'

  2. How do I set multipart in axios with react?

    do I set multipart in axios with react 'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'multipart/form-data'

Method 1

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)

Method 2

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.

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment