Uploading to S3 in React Native with progress updates

07 Mar 2018

The official approach for using AWS with React Native is to use the Javascript SDK or the AWS Amplify library:

https://github.com/awslabs/aws-sdk-react-native

However, neither library will report the progress of a file being uploaded to S3:

for performance reasons, the SDK does not split string or Buffer uploads into chunks just to track progress in Node. The SDK tracks upload progress in browsers (using XmlHttpRequest’s progress event) and when uploading a stream in Node (by tracking how much of the input stream has been read by Node’s underlying HTTP client).

https://github.com/aws/aws-sdk-js/issues/1323#issuecomment-371301068

For now we can use react-native-aws3 to get upload progress even though the project is no longer maintained.

Hopefully in the future Amplify adds progress updates and React Native supports the progress events.

For reference, here is some example code that would give progress in the browser:

var params = {
  Bucket: "myBucket",
  Key: myFileName,
  Body: file,
  ContentType: 'image/png'
}

const request = S3.putObject(params);
request.on('httpUploadProgress', function (progress) {
  console.log(progress.loaded + " of " + progress.total + " bytes");
});
request.send();

or

const req = S3.upload(params).on('httpUploadProgress', function (progress) {
  console.log(progress);
}).send(function (error, data) {
  console.log("FINISHED");
  if (error)
    console.log(error)
  else{
    const url = S3.getSignedUrl('getObject', { Key: params.Key });
    console.log(url)
  }
});
}