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 on 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

Step through the next steps and leave the defaults by clicking Next, and then click Create Bucket on the last step.

Set S3 Bucket Properties screenshot Set S3 Bucket Permissions screenshot Review S3 Bucket screenshot

Enable CORS

In the notes app we’ll be building, users will be uploading files to the bucket we just created. And since our app will be served through our custom domain, it’ll be communicating across domains while it does the uploads. By default, S3 does not allow its resources to be accessed from a different domain. However, cross-origin resource sharing (CORS) defines a way for client web applications that are loaded in one domain to interact with resources in a different domain. Let’s enable CORS for our S3 bucket.

Select the bucket we just created.

Select Created S3 Bucket screenshot

Select the Permissions tab, then select CORS configuration.

Select S3 Bucket CORS Configuration screenshot

Add the following CORS configuration into the editor, then hit Save.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>PUT</AllowedMethod>
		<AllowedMethod>POST</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod>
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>*</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

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

Save S3 Bucket CORS Configuration screenshot

Now that our S3 bucket is ready, let’s get set up to handle user authentication.