React Native Axios upload image return Network Error on Android

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.


Solution 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));
         }
       });
    

Solution 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', '[email protected]');
       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);
         });