network request failed react native on https image upload Android

Question

I am trying to upload image through fetch api but getting Network request failed error on real device android. I also tried lots of lots of suggestion from google but nothing worked for me.

my dependencies are:

"react-native": "0.62.0",
"axios": "^0.19.2",
"form-data": "^3.0.0",
"react": "16.11.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"

my snippets for image uploading:

const imagePick = () => {
          const formData = new FormData();

        try {

            const options = {
                title: 'Select Avatar',
                storageOptions: {
                  skipBackup: true,
                  path: 'images',
                },
              };

            ImagePicker.showImagePicker(options, (response) => {

                formData.append('avatar', {
                    uri: response.uri,
                   type: response.type, 
                   name: response.fileName,
                 })

                fetch(url, { 
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'multipart/form-data',
                        'Authorization': `Bearer ${authToken}`
                    },
                    body: formData
                })
                .then(res => {
                    console.log(res.status)
                })
                .catch(e => {
                    console.log(e)
                })

            });

        } catch (e) {
            toast("Unable to upload profile photo")
        }
      }

I am also using secure https url;

Answer 1

I was also facing the same issue but I guess this issue isn't related to axios library, instead it is because of the React Native itself.

As mentioned here, comment, it is because of Flipper.

So till the time React Native works upon it, you can comment below mentioned line from MainApplication.java

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

To comment, put // in front of above line

//initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

Answer 2

Had the same issue for a long time. The answer is quite simple. The code works on iOS but interestingly was failing on android.

For android, change from:

formData.append('avatar', {
    uri: response.uri,
    type: response.type, 
    name: response.fileName,
})

to:

formData.append('avatar', {
    uri: response.uri,
    type: `image/${response.type}`, 
    name: response.fileName,
})

For me, the image mime type caused axios to fail. Works fine without the image mime type on iOS tho.

Answer 3

Fast travel to 2024, in my case, it was because the file upload API url constant I imported was in a wrong format so it was undefined and I have been making upload call with very much correct format and file to an undefined url which my backend api was working as expected as I tested it million times ... how smart I am. T_T

:table-flip

Answer 4

I experienced this when I was updating the packages used by a React Native app I built a while back. Turns out that this error occurs when I use axios v0.27.2 (latest at the time of writing this) but the upload function works fine when I revert to the previously installed version which was(is) v0.24.0.

Hopefully this older version will hold the fort for someone else as well as we await the issue to be officially fixed. I find it too risky commenting out Flipper because I honestly don't know enough to know I don't need it.