Uploading files to AWS using ReactJS

This is a simple way for uploading files to an AWS S3 bucket using ReactJS

Storing files in AWS buckets is safer than saving them on the server. So there are just a few simple steps which can help you do this. Once you create the bucket, go to the Permissions tab and enter the CORS configuration:

<?xml version="1.0" encoding="UTF-8"?><CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod><AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod><AllowedMethod>DELETE</AllowedMethod><AllowedMethod>HEAD</AllowedMethod><AllowedHeader>*</AllowedHeader></CORSRule></CORSConfiguration>

Get the AWS keys and enter them in your .env file. Now just entering the keys won’t work, because by default ReactJS uses the NODE_ENV , so to ensure it uses the variable from your .env file begin both the names with REACT_APP_ . Only then will they be read.

Create React App · Set up a modern web app by running one command.

Next, you need to import those variables in your required files. Install dotenv package for the same. Just one more function away.

Write a similar kind of function to make the PUT request to the AWS bucket.

This function can onClick or onChange of any button or field, and can be configured more. Read the official documentation here:

Uploading Photos to Amazon S3 from a Browser