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.

If you're using localhost in the url, it will work on ios but not android, you should specify the server address for android — Mahdi N
– Mahdi N, Commented Apr 18, 2020 at 11:31
@MahdiN I'm not using localhost for the url. I use IP. Other request works fine too (get, post without image, etc) — Space Colony
– Space Colony, Commented Apr 18, 2020 at 11:49
Does this answer your question? Axios unable to upload file on android but working on iOS — Rizwan Ahmed Shivalli
– Rizwan Ahmed Shivalli, Commented Apr 18, 2020 at 12:25

ABM · Accepted Answer · 2020-10-27 05:46:57Z

6

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

In android/app/src/main/java/com/{yourProject}/MainApplication.java comment the below line :
```
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
```
In android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java comment in line 43 :
```
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
```

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

edited Oct 27, 2020 at 5:46

answered Sep 20, 2020 at 17:52

ABM

63310 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ezrqn Kemboi Over a year ago

Platform.OS === 'android' ? file:///${path} works fine. Thanks

Qamber · Accepted Answer · 2020-07-25 09:20:11Z

4

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

Comment the line as per below code:

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

answered Jul 25, 2020 at 9:20

Qamber

1088 bronze badges

1 Comment

Richard Lyle Over a year ago

This did not work for me, going to try upgrading my FLIPPER_VERSION to 0.41.0 as suggested below.

nicholascm · Accepted Answer · 2022-01-18 15:50:45Z

3

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.

answered Jan 18, 2022 at 15:50

nicholascm

6414 silver badges8 bronze badges

Comments

ishaq ashraf · Accepted Answer · 2023-01-10 14:20:08Z

2

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

answered Jan 10, 2023 at 14:20

ishaq ashraf

211 bronze badge

Comments

Eric Aya · Accepted Answer · 2020-06-11 09:19:24Z

0

FLIPPER_VERSION=0.41.0

Update your Flipper_Version above or equal = 0.41.0

edited Jun 11, 2020 at 9:19

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Jun 11, 2020 at 9:03

murugan mani

4856 silver badges6 bronze badges

Comments

deepanshu katyal · Accepted Answer · 2020-10-27 07:35:30Z

0

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

answered Oct 27, 2020 at 7:35

deepanshu katyal

6811 gold badge9 silver badges21 bronze badges

Comments

Andito · Accepted Answer · 2021-08-24 20:26:38Z

0

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

answered Aug 24, 2021 at 20:26

Andito

711 silver badge2 bronze badges

1 Comment

Wael Zoaiter Over a year ago

This is an old version, the latest version is 0.103.0 fbflipper.com/docs/getting-started/react-native

Collectives™ on Stack Overflow

React Native Axios upload image return Network Error on Android

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related