React Native Axios upload image return Network Error on Android

Question

I tried to upload some data including an image to server using Axios .

It's working perfectly on iOS , but on Android, it returned Network Error

const data = new FormData();
        data.append('tag', tag.METHOD_TAG_UPLOAD_PHOTO);
        data.append('app_version', 1);
        data.append('os_type', tag.OS_TYPE);
        data.append('store_code', kodetoko);
        data.append('photo', {
            uri: image_picked.uri,
            type: 'image/jpeg',
            name: judul + ".jpg"
        });

I tried to search for solution elsewhere, they said that the problem is within the type of the photo 's object, it needs to use image/jpeg type. I'm using it but it still return Network Error . Please help.

Answer 1

1. Open this dir 'android/app/src/debug/java/com/flatApp/ReactNativeFlipper.java'

2. Comment the line as per below code:

    NetworkingModule.setCustomClientBuilder( new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } });

Answer 2

I had the same issue and accepted answer didn't work for me. Below is what helped me.

1. In android/app/src/main/java/com/{yourProject}/MainApplication.java comment the below line:

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

2. In android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java comment in line 43:

    builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

3. Code for image upload:

    var formData = new FormData(); formData.append('UserId', 'abc@abc.com'); formData.append('VisitId', '28596'); formData.append('EvidenceCapturedDate', '09/10/2019 13:28:20'); formData.append('EvidenceCategory', 'Before'); formData.append('EvidenceImage', { uri: Platform.OS === 'android'? `file:///${path}`: `/private${path}`, type: 'image/jpeg', name: 'image.jpg', }); axios({ url: UrlString.BaseUrl + UrlString.imageUpload, method: 'POST', data: formData, headers: { Accept: 'application/json', 'Content-Type': 'multipart/form-data' }, }).then(function (response) { console.log('*****handle success******'); console.log(response.data); }).catch(function (response) { console.log('*****handle failure******'); console.log(response); });

Answer 3

FLIPPER_VERSION=0.41.0

Update your Flipper_Version above or equal = 0.41.0

Answer 4

I faced this issue, I guess this issue about Flipper Network.

For while, I commented initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

in this file /android/app/src/main/java/com/{your_project}/MainApplication.java

NOW THIS IS WORKING PROPERLY

Answer 5

This should be fixed in version 0.39.0. To upgrade, edit android > gradle.properties

#Version of flipper SDK to use with React Native

FLIPPER_VERSION=0.39.0  // edit this manually

Answer 6

I had this issue as well and none of the above helped. Android is very specific about the file upload for the multipart/form data. If you have any of the file parameters wrong, it will fail with "Network Error" and no other information which is incredibly frustrating!

In order to get mine working, I started by following this example (from Expo, but nothing expo-specific here): https://github.com/expo/examples/blob/d86f50a710e3805494b458fae2595502d9afa7bc/with-formdata-image-upload/App.js

I recommend starting with that too and trying some different things here on this line: where the file information is set for the requedst . I only modified this example axios instead of fetch for my issue.

Answer 7

add 'Content-Type': 'multipart/form-data' in your headers will resolve the issue