FromData Axios and react native (web), inconsistent?

[tamis-laan]

Describe the issue

I'm trying to post a file using axios on react native (web):

Example Code

	const form = new FormData()
	form.append('image', image, 'image.jpg') // <-- Blob with mimetype 'image/jpeg'
	axios.patch(`/image`, form, {headers:{"Content-type":"multipart/form-data"}})

Expected behavior, if applicable

When using react native web everything works fine, but when I'm using react native mobile the backend returns:

multipart file(s) required {"errors":[{"message":"multipart file(s) required","path":"/image"}],"name":"Bad Request","status":400}

What's going on here? Why is the behavior different between web and mobile?

Environment

• Axios Version: ^0.25.0
• Browser: firefox
• React native version: 0.64.3
• React native web version: 0.17.1

Additional context/Screenshots

no additional content

[mustafakameldev]

I had the same issue and solved like this for android/ios
// imageData your image
var photo = {
uri: imageData[0].uri,
type: imageData[0].type,
name: imageData[0].name,
};
var form = new FormData();
form.append('image', photo);
await fetch("/image", {
body: form,
method: 'your method',
headers: {
'Content-Type': 'multipart/form-data',
},
})

[hirbod]

using fetch was also the ONLY way I could upload images. I tried nearly 100 different approaches and hacks but I am not able to use axios with formData anymore on react-native.

[hirbod]

FormData is broken since Axios 0.25. It is working perfectly fine with 0.24 on react-native.
I wasted 4 hours until I've found a similar issue which told me to downgrade.

There are also StackOverflow issues.
https://stackoverflow.com/questions/71321756/react-native-expo-axios-file-upload-not-working-because-axios-is-not-sending/71323380

And this issue (with a workaround):
#4406

Version 0.24

Version 0.25 and Version 0.26

[hueter]

Also experiencing this -- exact same code in web works on axios 26, breaks on axios 26 on mobile clients. Downgraded to axios 24 to fix it

[kamilwezgowiec]

Adding transformRequest will fix the issue, as mentioned here #4406 (comment)

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

[Romick2005]

It is related with #4412. Provided a fix in pull request and waiting for a merge.

[jasonsaayman]

Hi 👋

Please could you retry with the latest pre-release version and open a new issue should this error still be relevant?

Thanks