Store Data in Amazon S3 with React
Amazon S3 offers a way to store & retrieve items in the cloud. In this lesson we’ll see how we can easily store images in an S3 bucket using the AWS Amplify Storage API. S3 is object storage built to store and retrieve any amount of data from anywhere on the Internet.
Instructor: [00:02] To add storage using Amazon S3, we'll run the Amplify add storage command. For the type of storage, we'll choose content. For the project name, you can either use the default or provide a name of your own.
[00:19] Next, we're prompted for a bucket name. If you do use a custom bucket name, please be aware that the bucket name needs to be unique.
[00:30] For access, we only want to give authorized users access. For the type of access, we'll choose read and write. Now that the resources have been created locally, we'll run amplify push to create the service in our account.
[00:49] Once the resource has been successfully created in your account, go ahead and open up App.js in your text editor. The first thing we'll do is we'll import the storage API from AWS Amplify. In the class definition, we'll create some initial state containing a file URL, a file, and a filename.
[01:18] We'll create a handle change method that will handle the file input. We'll save the file data in a variable we'll call File. Then we'll call this.setstate, setting the file URL, the file, as well as the filename.
[02:01] We'll next create a function called SaveFile that will save the file in our S3 bucket. SaveFile will call storage.put, passing in the filename as well as the file data.
[02:20] If this is successful, we'll console.log successfully saved file and then call this.setstate, resetting the file URL, the file, and the filename. If there's an error, we'll log out the error.
[02:51] In our render method, we'll first create a file input and set the onchange handler to this.handlechange. We'll then create an image with the source set to this.state.fileURL. Finally, we'll create a button with an onclick handler set to this.SaveFile.
[03:24] Now we can test it out. Open the Terminal and run npm start. Here, we should be able to upload and save files. If the save is successful, we should see successfully saved file logged out to the console.
[03:49] Let's take a look at the bucket. To view your S3 buckets, open the AWS console and search for S3 in the AWS Services search bar.
[04:02] In the S3 dashboard, we can now search for the name of the bucket we just created. In the public folder, we should now see any images that we uploaded.
[04:18] Next, let's look at how to get images from our S3 bucket. To do so, click on an image that we've uploaded already and save the name of the file to your clipboard.
[04:28] Next, we'll go back to App.js and make some updates. The first thing we'll do is we'll remove all of the state with the exception of the file URL. We'll remove the two existing class methods and replace them with a componentDidMount lifecycle method. ComponentDidMount will call storage.get, passing in the name of the image, and then calling this.setstate, resetting the value of file URL.
[05:08] In our render method, we can go ahead and delete the input as well as the button components. To test it out, open the Terminal and run npm start. When the app loads, we should see the image render to our screen.
[05:24] Storage also has a storage.list method that will list out all of the images available in the S3 bucket. To learn more, check out the docs at aws-amplify.github.io.
I had to add manually read writes to cognito users to read files from s3 bucket
Great character Nader,
I have an issue "Missing required key 'Bucket' in params" when uploading the image. I check the S3 and don't find a new bucket created.
Thanks in advance.