How to upload files on an s3 bucket in React js

Amazon Simple Storage Solution (S3) is a cloud-based storage solution for developers that allows them to store and retrieve massive volumes of data. It’s highly scalable and long-lasting, making it an excellent choice for storing and managing files in a web application. In this tutorial, we’ll look at how to use React JS to upload files to an S3 bucket.

Requirements

• aws-sdk

Step 1: Set up an S3 Bucket

You must first create an S3 bucket in your AWS account in order to use Amazon S3. By entering into the AWS Management Console and going to the S3 service, you can accomplish this. To create a new bucket, click the “Create Bucket” button. Choose the region where you wish to keep your data and give it a unique name. Additionally, you can modify bucket settings like access permissions and versioning.

Step 2: Make bucket public

Now we need to edit the bucket policy to make our file publicly accessible. Open your bucket and go to the permission tab and click on the edit button of the Bucket policy and paste the below JSON into it.

Note: Replace bucket-name with the name of your bucket.

Step 3: Edit CORS Policy

Just at the bottom of the permission tab, you will find the Cross-origin resource sharing (CORS). Paste the below JSON into it to enable the upload of files from the frontend or else you will receive a CORS error while uploading files.

Step 4: Install the AWS SDK for JavaScript

Installing the AWS SDK for JavaScript will allow your React JS application to communicate with S3.

npm install aws-sdk

Step 5: Create a file uploader in React JS

To allow users to upload files to S3, you need to add a file input to your React JS application. Paste the below code into your application.

In the above code, we are selecting the file and handleFileChange is basically storing the file in our file state which we created using the useState hook.

Step 6: Import aws-sdk

Import aws-sdk at the top of your code.

import AWS from 'aws-sdk';

Step 7: Configure AWS Credentials and Upload the file to S3

Now we will create a function that contains our AWS credentials and upload the file on S3. The name of the function is uploadFile which is triggered when we click on the upload button which is created on the above code.

You need to replace these strings

• bucket-name: Name of your bucket
• region: Bucket Region
• youraccesskeyhere: Your access key
• yoursecretaccesskeyhere: Your secret access key

So here is the final code

Note: I have added the secret key and access key in the code but it’s not a good idea to include them in the code. You should store them in a .env file and then access them.

For any query, you can get in touch with me via LinkedIn

Below you can find the sample GitHub Repository and demo on codesandbox.

GitHub - Manntrix/react-s3-upload: How to upload files on an s3 bucket in React js