Overview

Updated by Sudharsan and Rishik 21S

Today we’ll be learning how to directly upload images to Amazon Web Services Simple Storage Service (S3) on our blog application from Lab 4 and 5. We will be implementing an image input for handling image uploads and then these images will directly be uploaded to S3.

Amazon S3 is a popular and reliable storage option for storing files such as images, documents, and videos. By uploading directly to S3, we can reduce server load because our server load no longer needs to handle receiving images from the client. When handling large images, our service would otherwise not be able to respond to other web requests as efficiently.

Code Flow

In general, the method described in this article follows these simple steps:

• A file is selected for upload by the user in the client
• The client makes a request to your server, which produces a temporary signature with which to sign the upload request
• The browser then uploads the file directly to Amazon S3 using the signed request

Setup

🚀 Make sure everything is committed and pushed to github normally for both Lab4 and Lab5

🚀 Go into your Lab5 and Lab4 directories and run:

git checkout -b withS3

Now you will have a separate branch with image uploading as a feature.

S3 Setup

First we need to enable our Heroku application to use S3, which requires that the app have access to the AWS credentials as well as the name of the bucket to store files.

🚀 Create an AWS account here and navigate to the Security Credentials page under Identity Access Management (IAM). You’ll need to scroll down to Access Keys and create an access key.