CODEWITHSUNDEEP
androidreact-nativeaxios
Space Colony
Space Colony

Reputation: 63

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.

Upvotes: 3

Views: 7129

Answers (7)

ishaq ashraf
ishaq ashraf

Reputation: 21

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

Upvotes: 2

nicholascm
nicholascm

Reputation: 641

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.

Upvotes: 3

Andito
Andito

Reputation: 61

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

Upvotes: 0

deepanshu katyal
deepanshu katyal

Reputation: 671

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

Upvotes: 0

ABM
ABM

Reputation: 593

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

Upvotes: 6

Qamber
Qamber

Reputation: 108

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

Upvotes: 4

murugan mani
murugan mani

Reputation: 485

FLIPPER_VERSION=0.41.0

Update your Flipper_Version above or equal = 0.41.0

Upvotes: 0

Related Questions