Axios in React app. Posting image with form data sends request with empty body

Question

I'm trying to send image file to my backend API. Last works fine with Postman. The problem is not with image, I'm not able to send any request with axios and form data, no meter I append image or not.

Everything works fine with fetch. It took time to understand, that fetch does not need any content type, and last generates automatically as multipart/form-data with right boundary.

As written axios should do same as fetch, but it does not generate or change its content-type. Passing header 'content-type' : 'multipart/form-data does not do the trick of course. When I do not set content type it just use application/json. I was not able to find anything like that in documentation. Everywhere its says, that axios should create content type header automatically.

My axios version is 0.18.0. Here is code, it can't be more simple =)

axios
    .post(url, payload)

Mikayel Margaryan · Accepted Answer · 2020-07-06 08:17:56Z

#######UPDATE#######

It turned out the problem was with axios interceptor. If you don't use interceptors you won't get this problem. So when I created new instance and deleted all headers no interceptors where called that's why my code worked. But let me bring more details to help others avoid this pain. Interceptor has transformRequest function where this part of code exists

if (utils.isObject(data)) {
  setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
  return JSON.stringify(data);
}

where setContentTypeIfUnset function is

function setContentTypeIfUnset(headers, value) {
    if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
        headers['Content-Type'] = value;
    }
}

So if your object has undefined headers you will also pass this situation. But in my case even after deleting all headers I must pass some header to my application. And on setting it interceptor calls that transfromRequest function which adds that header to my formdata request. I hope in future releases axios will fix this issue.

#######OLD ANSWER#######

As I guessed, somehow axios in my project set its default value for header content type and even setting it as 'content-type' : undefined did not overwrite that value. Here is solution

let axiosInstance = axios.create();

delete axiosInstance.defaults.headers;

Then use that instance.

Spent whole day to find this solution.

Nikhil Ponduri · Accepted Answer · 2020-06-26 12:08:27Z

0

       const formData = new FormData();
       
       formData.append('image', image); // your image file
       formData.append('description','this is optional description');

        Axios.post(`your url`, {body:formData}, {
        headers: {
            'content-type': 'multipart/form-data'
        }
    })

Can you please try this code once ?

answered Jun 26, 2020 at 12:08

Nikhil Ponduri

53110 silver badges30 bronze badges

Comments

Raghvender Kataria · Accepted Answer · 2020-06-26 12:09:45Z

0

You can try like this:

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

answered Jun 26, 2020 at 12:09

Raghvender Kataria

1,50511 silver badges14 bronze badges

3 Comments

Mikayel Margaryan Over a year ago

Thanks for trying, but didn't work. Same empty body.

Raghvender Kataria Over a year ago

Can you post your actual url and payload that you are sending or may be the postman request which is working fine

Mikayel Margaryan Over a year ago

I can, but its just some url with form data which contains just an image. It won't help. Also I mentioned that same logic with fetch request worked. It's some problem with content-type headers. As I see now somehow axios se its default content-type thats why code does not work. I just need to figure out how he sets that header and where.

Collectives™ on Stack Overflow

Axios in React app. Posting image with form data sends request with empty body

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related