Upload files from React Native app to AWS S3
In today’s mobile app landscape, file handling is a common requirement. Users often need to upload and access various types of files, such as images, PDFs, and documents. In this article, we’ll address a specific scenario: uploading images from a React Native app to AWS S3, Amazon’s cloud storage service. We’ll guide you through the necessary steps in three chapters.
1. How to open a file explorer and select a file?
Now, this is the simplest part. The React Native community has already prepared libraries that help us achieve this. In this article, we will use react-native-document-picker.
As demonstrated in the example, opening a file explorer is straightforward. However, please note that, for the sake of simplicity, we are limiting the app to using images.
2. How to upload a file directly to AWS S3?
Amazon S3 or Amazon Simple Storage Service is an object storage service.
Amazon S3 can store any type of object, which allows uses like storage for Internet applications, backups, disaster recovery, data archives, data lakes for analytics, and hybrid cloud storage.
In layman’s terms its a service provided by AWS that allows the storing and management of files trough a web service interface. Now the question is how do we connect to it? Again, because this is React Native there are many packages that allow you to connect to AWS and AWS S3 specifically. But because this is Javascript after-all we can just use the already provided package from Amazon directly. Because setting up AWS would greatly extend this article we are not going to cover the detailed steps here. You can find detailed steps how to achieve this here.
First of all, let’s install the official AWS SDK for JavaScript. Since this is a very large package, as it needs to include all services provided by AWS, there is also a separate package that focuses solely on AWS S3.
npm install @aws-sdk/client-s3
And some peer dependancies:
npm i react-native-get-random-values
npm i react-native-url-polyfill
Further reading and other usefull links
