React Native upload image to AWS Server not working for Android

Question

I was having some problem when trying to upload image from React Native to AWS Server. Here is my code:

async function uploadImageAsync(uri) {
  console.log(         


        

Answer 1

In fact, I have encountered this problem. You want to use 'fetch' to upload file(the type is mutipartfile), but it always show [TypeError: Network request failed]. You can reference this issue(https://github.com/facebook/react-native/issues/28551). Have a try if you are using RN0.62.

Here is the summary from the github user [abumostafa] in the linked issue.

Whoever is still struggling with this issue. it's happening because of Flipper network plugin. I disabled it and things work just fine.

My workaround to make this work is commenting out line number 43

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 this file android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Answer 2

I was facing the same issue. I was trying to upload images from the phone's camera roll or photo gallery to AWS S3. It was working fine for IOS, but was throwing error TypeError: Network request failed for Android device.

So, I used npm library rn-fetch-blob, instead of fetch() method.

import RNFetchBlob from 'rn-fetch-blob';

RNFetchBlob.fetch('PUT', AWSPresignedURL, {'Content-Type': 'multipart/form-data'}, Platform.OS === 'ios' ? RNFetchBlob.wrap(filePath) : `RNFetchBlob-${filePath}`)

Please note, in my case, I had different file paths for IOS and Android devices. We handle it in different ways using rn-fetch-blob

Sample filePath variable data for

1. IOS device -

"/Users/Niveditha/Library/Developer/CoreSimulator/Devices/B41EB910-F22B-4236-8286-E6BA3EA75C70/data/Containers/Data/Application/B88777C6-6B10-4095-AB67-BB11E045C1DE/tmp/react-native-image-crop-picker/img.jpg"

2. Android device -

"file:///storage/emulated/0/Android/data/com.uploadcameraroll/files/Pictures/img.jpg"

Code to generate AWSPreSignedURL -

let AWS = require('aws-sdk');
let S3 = new AWS.S3();

AWS.config.region = 'ap-south-1'; 
AWS.config.accessKeyId = 'AKXXXXXXXXXXXXXXXX'; 
AWS.config.secretAccessKey = 'XIJyXXXXXXXXXXXXXXXXXXXXXXXXXXX+H+GR';

S3.getSignedUrl( 'putObject' , 
        { Bucket: 'upload-app-photos',
          Key: 'upload/' + fileName,
          Expires: 120,
          ACL: 'public-read'
         }, (err,url) => {
            if (err) {
               console.log("error ", err);
               return;
           }
            console.log("AWSPreSignedURL ", url);
      })

This issue was officially raised - https://github.com/facebook/react-native/issues/25244

Answer 3

I had a similar problem and finally solved it. So I think I can give you a hint.

1. First, [TypeError: Network request failed] means the problem is on the client side.

2. apiUrl should https://...

   you can simply test this with localtunnel npm. it gives you https format url that proxies to your local url.

2. you can add type: 'image/jpeg' to form data.

   you can check media type here

This is part of fetching code

https://gist.github.com/zeroFruit/d46d4cae57e5e8cf59e1b541c0bf322e

Answer 4

I am not sure whether you are trying to upload files to AWS S3 service but if you are, you can look into AWS Amplify React Native which may help you a lot.

By using this library, you can upload files by:

Storage.put('test.txt', 'Hello')
    .then (result => console.log(result))
    .catch(err => console.log(err));

Details are at https://github.com/aws/aws-amplify