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

Question

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 welcome :)?

Answer 1

It is happening because of Flipper network plugin. Comment line number 43 in the file android/app/src/debug/java/com/<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);

Answer 2

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.com/facebook/flipper/issues/993#issuecomment-619823916

Answer 3

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',
  },
})

Answer 4

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