axios: POST FormData still creates Network Error on Android with 0.27.2

I was having the same issue. Spent and entire day on it. Rolled back to Axios 0.24.0 and it started working.

@Slapbox That doesn’t change anything since you set the same value as the default. I think you must use 'Content-Type': 'multipart/form-data' when you use FormData. From my debugging if you send FormData with the default 'Content-Type': 'application/x-www-form-urlencoded' it doesn’t make the request at all on Android and XMLHttpRequest.onerror is called here: https://github.com/axios/axios/blob/v0.27.2/lib/adapters/xhr.js#L116 which causes the rejection with “Network Error”.

Note that if you use FormData from form-data you’ll likely need this workaround: https://github.com/axios/axios/issues/4412#issuecomment-1025506556. But recently I found that there is a global FormData available in React Native that you can use and that works without that workaround.

Same issue for me too

Solved my problem after adding headers content-type “multipart/form-data” instead of “x-www-form-urlencoded”.

Axios version: 1.3.4

I resolve the network error problem setting file like this

{
    name: 'files',
    type: 'image/png',
    uri: Platform.select({ ios: file.uri.replace('file://', ''), android: file.uri }),
}

info

react: 17.0.1
react-native: 0.64.3
react-native-image-crop-picker: ^0.38.1

2024, and I still have this problem, it doesn’t happen every time, only sometimes and on Android.

As I said, it doesn’t happen all the time, only once in a while, I haven’t found a pattern for it.

I know that the file is filled, I have a log showing it before and in the request in the flipper the formData appears filled.

But out of nowhere, sometimes this network error happens, and when it happens, if you try to submit again, it works normally.

react native: 0.71.1 axios: 1.6.7

     console.log("file", file)
    const formData = new FormData();
    formData.append('file', file);

    return api.put<IBaseResponse<IOnboardingResponse>>(
      submitEvidenceRoute,
      formData,
      {
        headers: { 'Content-Type': 'multipart/form-data' },
      },
    );

I tried using mimo and the solutions above, but nothing… the worst thing is that it only happens once in a while, so I always have to test a lot to see if it solves it or not…

Fixed by add correct content type using the rpm mime pkg.

import mime from "mime";

const newImageUri =  "file:///" + imageUri.split("file:/").join("");

const formData = new FormData();
formData.append('image', {
 uri : newImageUri,
 type: mime.getType(newImageUri),
 name: newImageUri.split("/").pop()
});

@zaubara do you see any network request in the debugger’s Network tab from Axios?

We seem to be having this same issue, and we do not see Axios creating any network request in the Network tab, but this may be a limitation of Flipper. But the Network Plugin doesn’t show Axios making any requests either, and other network requests do show up there. It seems like Axios isn’t even sending the request.

Edit: Actually, rebooting our development machine seems to have resolved this for us, but that’s rather baffling.

I was getting the same error. Spent several days and a lot of time upgrading packages and trying all the solutions from issues and stackoverflow. Finally this was the mistake which I don’t think is mentioned which even in the docs.

If we have a FormData object

formData.append("name", "abc")
formData.append("state", undefined)
formData.append("address", {
    addressLine1: "",
    addressLine2: ""
});

It will throw the same error since the "state" is undefined and "address" is an object. But FormData accepts only string or File or Blob. So this was causing the issue for me. Once I replaced undefined with "" and "address" with JSON.stringify(addressObj) it started working.

Reference -> https://stackoverflow.com/a/72899049/5918233

React Native 0.72.4

Network Error on POST-ing FormData in Android disappeared by giving the following headers:

headers: {"content-type": "multipart/form-data"}

Does this still affect versions 1.0.0 and above? Can anyone report their findings?

@Slapbox I’m on the v1.2.2, and I was facing the same issue until I try the solution of @paruckerr, and finally works!

Downgrading to 0.24.0 didn’t work.

Does this still affect versions 1.0.0 and above? Can anyone report their findings?

This is still happening with react-native: 0.64.0 but I’m glad(?) to add that downgrading axios worked for us too

React Native

Hey guys, I spent hours on this and the only way I could get it to work was to downgrade to 0.24.0 as @jjspierx mentioned.

  const formData = new global.FormData()
  formData.append('file', data)

  const response: PostImageResponse = await http({
    method: 'POST',
    url: `/document/link/${docId}`,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    data: formData,
  })

Where http is a utility that sets up and calls axios along with the config object parameter shown above.

Version: React: 18.0.0 Expo: ~46.0.9 Axios: 0.24.0

oh, thanks a lot! i am in middle of 2024 and they still don’t fix it

I was having the same issue. Spent and entire day on it. Rolled back to Axios 0.24.0 and it started working.

On iOS this was working fine, but on Android it was immediately failing without reaching the server with a “NETWORK ERROR”.

I did have setup correctly in the headers multipart/form-data.

I didn’t want to downgrade anything to fix this, if you are like ME this how I fixed it, my mixing @mateusfg7 and @pnxdxt solutions.

There are my relevant libraries:

    "axios": "^1.4.0",
    "expo": "~48.0.11",
    "react-native": "0.71.8",

And this is the code that I sent to my server:

import mime from "mime";

// Upload is the document that you receive from the file-picker library in Expo
const uri = Platform.select({
      ios: upload.uri.replace("file://", ""),
      android: upload.uri,
});
 
const file = {
        name: upload.name,
        type: mime.getType(uri),
        uri,
}   
    

After this, it has started working flawlessly without downgrading anything. Cheers!

The issue is that axios is setting a wrong Content-Type header if you don’t pass it explicitly. See https://github.com/axios/axios/issues/4823#issuecomment-1224615032

Sure: {“VERSION”:“0.27.2”,“isFormData”:true,“toString”:“[object Object]”,“props”:[“constructor”,“append”,“getParts”]}