axios: Can't post FormData since Axios 0.25.0

It works for me:

const formData = new FormData();
...
const response = await networking.post('/URL', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  transformRequest: (data, headers) => {
    return formData;
  },
});

Versions: react-native: 0.67.2 axios: 0.26.0

This is a shorter form, since it is still needed in 0.26.1

axios.post(url, formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  transformRequest: formData => formData,
})

The headers value might only be needed if you have modified the default Content-Type for axios. (just a guess since I have read that axios should set the correct Content-Type based on the FormData type)

In which axios version will the fix that closed this issue be released?

Just found out, thanks to this comment: https://stackoverflow.com/questions/56235286/react-native-post-form-data-with-object-and-file-in-it-using-axios/71116822#71116822

that you don’t need to return “formData” in your transformRequest, it is just enough to return “data”.

const formData = new FormData();
...
const response = await networking.post('/URL', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  transformRequest: (data) => {
    return data; // thats enough
  },
});

This problem appears to be due to someone recklessly optimizing the isFormData function in the utils.js file. This could break form detection logic in a non-browser environment where FormData is not a native object that can be recognized by the Object.prototype.toString method. Fixed in #4413 with some additional benefits.

We have the same issue, with the following code:

  const data = new FormData();
  data.append(name, {
    uri: toUri(filePath),
    name: fileName,
    type,
  });
  return await post<T>(endpoint, data, {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data;',
      'cache-control': 'no-cache',
    },
  });

The backend throws a Multipart: Boundary not found error

I have added transformRequest according to @Wexleron answer. But i have still can’t fix this issue. But after quite a while I have found a solution to fix this issue, the key is don’t set “Conten-type: multipart/form-data” manually, just remove it, let axios create that header automatically. The folowing code will fix this issue :

const formData = new FormData();
...
const response = await axios.post('/URL', formData, {
  transformRequest: () => formData,
});

Env: “axios”: “^1.1.3” “react”: “18.2.0”

Merged, I will release tonight closing

0.26.0 does not work with React Native. Could someone please test the changes with RN before releasing?

Why are these kind of useless “optimizations” even done? Why change something that works? Nobody will see any speed improvement.

React Native now works as of Axios 0.27.0! No more inexplicable 400 errors.

I’m not going to add any bubble gum code to fix a bug in axios. I’ll just wait for a version that actually works. Not even sure if there is any need to upgrade 0.24.0 any time soon as this version works just fine.

Any news about the next release @jasonsaayman?

Thx bro ❤️. I have the same issue here, and just downgrading to “^0.24.0” version, solved my problem. Waiting for the release.

This is a shorter form, since it is still needed in 0.26.1

axios.post(url, formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  transformRequest: formData => formData,
})

The headers value might only be needed if you have modified the default Content-Type for axios. (just a guess since I have read that axios should set the correct Content-Type based on the FormData type)

In which axios version will the fix that closed this issue be released?

Works perfectly for me

if you are having any issues with multipart form data upload on react native. please check this answer.

Just tested 0.27.2 and it’s working as expected now.

Axios 0.26.1 This bug still occurs… Env:

• React native 0.67.4
• Axios 0.26.1
• React 17.0.2

@kenikori is it the official way to post FormData with Axios now? Or is it just a crutch?

Still having this error with 1.3.3. I need to still use this workaround.

axios.post(url, formData, {
   transformRequest: () => formData,
})

none of above solutions works in axios@0.27.2 with “react-native”: “0.68.2”, 😦

Please donrt use 0.27.0 that was a borked release, please use the latest version

I’ve tested 0.27.2 today in React Native and found it works, where it previously wasn’t.

I’m having the same problem since updating to 0.25.0.

I am using Axios 1.4 (also tried with 1.3.4) and the work around still does not work for me:

If I look at the actual request payload it still just sends the string “[object Object]” instead of the actual data… help…

axios.post(
        `/url`,
        applicationFormData,
        {
          transformRequest: () => applicationFormData,
        }
      );
      

convert the data into string (for example using JSON.stringify()) or blob before appending to formdata object

dont think so . I still use 0.24.0

Solved ?

I’ve tested 0.27.2 today in React Native and found it works, where it previously wasn’t.

I’ve tested 0.27.2 with “react-native”: “0.67.4” and I can confirm this works, without the need to use “transformRequest”

@jasonsaayman Hi, schteff’s tip worked for me. Simply updating the Axios did not.

Thanks to Schteff.

The tip:

This is a shorter form, since it is still needed in 0.26.1

axios.post(url, formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  transformRequest: formData => formData,
})

The headers value might only be needed if you have modified the default Content-Type for axios. (just a guess since I have read that axios should set the correct Content-Type based on the FormData type)

In which axios version will the fix that closed this issue be released?

Thanks @kenikori Wish I would’ve seen that before I wasted 5 frickin hours understanding, why image uploads are broken for me out of the blue

2 days for me, then i give up for 2 weeks and take a rest:-) I did exactly by the book, every help on internet was exactly same and didnt functioned. I still ahve problems. but at least I know wheres the catch