How to Upload Files To AWS S3 from React App using AWS Amplify

To get started, we first need to create a new React project using the Create React App CLI 

$ npx create-react-app React

Now change into the new app directory and install NPM packages for AWS Amplify, AWS Amplify UI React, react-router-dom, emotion, and uuid

$ cd React
$ npm install aws-amplify @emotion/css uuid react-router-dom@5 @aws-amplify/ui-react

Configure Amplify

Installing the CLI

Next, we’ll install the AWS Amplify CLI:

$ npm install -g @aws-amplify/cli

Now we need to configure the CLI with our credentials.

$ amplify configure

- Specify the AWS Region: us-east-1 || us-west-2 || eu-central-1
- Specify the username of the new IAM user: amplify-cli-user
> In the AWS Console, click Next: Permissions, Next: Tags, Next: Review, & Create User to create the new IAM user. Then return to the command line & press Enter.
- Enter the access key of the newly created user:   
? accessKeyId: (<YOUR_ACCESS_KEY_ID>)  
? secretAccessKey: (<YOUR_SECRET_ACCESS_KEY>)
- Profile Name: amplify-cli-user

Initializing A New Project

$ amplify init

? Enter a name for the project: React

> The following configuration will be applied: 
Project information
| Name: postagram
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? (Y/n): Y

Using default provider  awscloudformation
? Select the authentication method you want to use: AWS access keys
? accessKeyId:  (<YOUR_ACCESS_KEY_ID>)
? secretAccessKey:  (<YOUR_SECRET_ACCESS_KEY>)
? region:  (<REGION>)
Adding backend environment dev to AWS Amplify app: xxxxxxxxxxxxx

The Amplify CLI has initialized a new project, and you will see a new folder: amplify, as well as a new file called aws-exports.js in the src directory. These files contain your project configuration.

To view the status of the amplify project at any time, you can run the Amplify status command:

$ amplify status

    Current Environment: dev
    
┌──────────┬───────────────┬───────────┬─────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
└──────────┴───────────────┴───────────┴─────────────────┘

To launch a new browser window and view the Amplify project in the Amplify console at any time, run the console command:

$ amplify console