javascript - React native 0.62.0 - Network request error on Android for file upload - Stack Overflow

admin管理员组

文章数量:1325236

I have upgraded react-native to 0.62 and i got the problem of Network error for Android only, iOS works fine.

I use FormData object to populate data formated as

const data = new FormData(); 
// On Android i add file protocol to file path - file://... 
data.append('photos', { 
   uri: 'file:///data/.../my-image.jpeg', 
   type: 'image/jpeg',
   name: 'my-image.jpeg' 
});

and other textual data

data.append('description', 'my long description...');

Does anyone have the problem?

I have tried multiple Android SDKs 27, 28, 29, and got same problem on all :(

The things is if i do not upload images, but only textual data request works just fine :(

Any suggestion wele :)?

I have upgraded react-native to 0.62 and i got the problem of Network error for Android only, iOS works fine.

I use FormData object to populate data formated as

const data = new FormData(); 
// On Android i add file protocol to file path - file://... 
data.append('photos', { 
   uri: 'file:///data/.../my-image.jpeg', 
   type: 'image/jpeg',
   name: 'my-image.jpeg' 
});

and other textual data

data.append('description', 'my long description...');

Does anyone have the problem?

I have tried multiple Android SDKs 27, 28, 29, and got same problem on all :(

The things is if i do not upload images, but only textual data request works just fine :(

Any suggestion wele :)?

• javascript
• android
• react-native
• file-upload

Share Improve this question Follow asked Mar 29, 2020 at 18:01 Kristijan TomicKristijan Tomic 4111 gold badge33 silver badges99 bronze badges 1

• I am having the same problem...Were you able to resolve the same? – Narendra Singh Commented Jun 10, 2020 at 15:04

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

It is happening because of Flipper network plugin. Comment line number 43 in the file android/app/src/debug/java//<yourappname>/ReactNativeFlipper.java

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            @Override
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

In Flipper version 0.39.0 and above this problem was fixed. I've just update Flipper to version 0.40.0 and it working fine.

https://github./facebook/flipper/issues/993#issuement-619823916

Posting this bec I made it work using react-native-ssl-pinning and react-native-image-crop-picker

FormData

file: {
    uri: image.path,
    type: image.mime,
    name: 'image.jpg',
    fileName: 'image.jpg',
    size: image.size,
  },

and the fetch

fetch(url, {
  method: 'POST',
  sslPinning: { certs: ['cert'] },
  body: {
    formData: formData,
  },
  headers: {
    Authorization:
      'Bearer Token',
    Accept: 'application/json; charset=utf-8',
    'Content-type': 'multipart/form-data; charset=UTF-8',
  },
})

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

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

2. In android/app/src/debug/java//{yourProject}/ReactNativeFlipper.java ment 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);
        });
   

本文标签： javascriptReact native 0620Network request error on Android for file uploadStack Overflow