Now that we have our database table ready; let’s get things set up for handling file uploads. We need to handle file uploads because each note can have an uploaded file as an attachment.

Amazon S3 (Simple Storage Service) provides storage service through web services interfaces like REST. You can store any object in S3 including images, videos, files, etc. Objects are organized into buckets, and identified within each bucket by a unique, user-assigned key.

In this chapter, we are going to create an S3 bucket which will be used to store user uploaded files from our notes app.

Create Bucket

First, log in to your AWS Console and select S3 from the list of services.

Select S3 Service screenshot

Select Create bucket.

Select Create Bucket screenshot

Pick a name of the bucket and select a region. Then select Create.

  • Bucket names are globally unique, which means you cannot pick the same name as this tutorial.
  • Region is the physical geographical region where the files are stored. We will use US East (N. Virginia) for this guide.

Make a note of the name and region as we’ll be using it later in the guide.

Enter S3 Bucket Info screenshot

Then scroll all the way down and click Create bucket.

Click create S3 Bucket screenshot

This should create your new S3 bucket. Before we move on, we need to make sure that our React.js frontend will be able to upload files to this bucket. Since it’ll be hosted on a different domain, we need to enable CORS.

Select the newly created bucket from the list.

Select Created S3 Bucket screenshot

Select the Permissions tab

Select S3 Bucket Permissions tab

Then scroll down to the Cross-origin resource sharing (CORS) section and hit Edit.

Scroll to S3 Bucket CORS Configuration screenshot

Paste the following CORS configuration into the editor, then hit Save changes.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Save S3 Bucket CORS Configuration screenshot

Note that, you can customize this configuration to use your own domain or a list of domains when you use this in production.

Next we are going to start working on our serverless API backend.