javascript - 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(uri);
  let apiUrl = '...' 
  let uriParts = uri.split('.');
  let fileType = uri[uri.length - 1];
  let formData = new FormData();
  formData.append('image', {
    uri,
    name: `image.jpg`,
    filename: `image.jpg`,
  });

  let options = {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    },
  };

  return fetch(apiUrl, options);
}

The results that printed out at the console are:

file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540gh%252Ftp2/ImagePicker/37c89140-2172-4566-98a2-e7393ea72e89.jpg
Object {
  "uploadResponse": undefined,
}
Object {
  "uploadResult": undefined,
}
Object {
  "e": [TypeError: Network request failed],
}

What I did is I pick an image from image picker, then I will upload it to AWS server. If success, print out success message. If failed, print out those in the console above.

The strange thing is, it managed to upload on iOS but not Android. Any ideas why is it so?

Thanks!

Answer 1

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