Amazon Web Services

S3 Upload Demo

Github

This app uses Amazon S3 Web Service for storage of the uploaded images. You must have an Amazon AWS account AND have your access credentials

Register with Amazon Web Services

Create an account on Amazon Web Services, you can use your Amazon account, http://aws.amazon.com/console/ Click on the Sign Up button.

Log in and create new S3 bucket

When you're registered and logged into the AWS site, visit the console, https://console.aws.amazon.com/console/home?#

In the Storage and Content Delivery section click on S3, scalable storage in the cloud, https://console.aws.amazon.com/s3/home.

Now we will create a bucket (like a directory). The bucket will be the container for your uploaded files. On the left panel of the S3 console, click 'Create Bucket'. Provide a bucket name and leave the Region to US Standard. Then click Create.

Add environment variables to .env and Heroku

Inside the AWS Console, on the top menu bar click on your name, then click SECURITY CREDENTIALS.

On the SECURITY CREDENTIALS page, you will have access to

• ACCESS KEY ID
• SECRET ACCESS KEY

Open your .env file and add 2 new variables for Amazon AWS

.env

AWS_ACCESS_KEY=XXXXXXXXXXXX
AWS_SECRET_KEY=XXXXXXXXXXX

Save your .env file.

Now let's push the new AWS variable to Heroku config, run the commands in Terminal

heroku config:add AWS_ACCESS_KEY_ID=XXXXXXXXXXX
heroku config:add AWS_SECRET_ACCESS_KEY=XXXXXXXXXXX

You can confirm the AWS variables are on heroku by running the command,

heroku config

File Upload

• HTML file upload enctype attribute must be "multipart/form-data"

• Method must be POST

  <form method="POST" action="/newphoto" enctype="multipart/form-data">
  
  <div class="field ">
      <label for="title">Title</label>
      <input type="text" name="title" id="title" >
  </div>
  
  <div class="field ">
      <label for="caption">Caption</label>
      <input type="text" name="caption" id="caption" >
  </div>
  
  <div class="field">
      <label for="image">Image Upload</label>
      <input type="file" name="image" id="image">
  </div>
  
  <input type="submit" class="btn" value="Save">
  

Receiving a file upload via POST

package.json

Add AWS-SDK-JS to your package.json file. Run npm install.

app.js

app.post('/newphoto', routes.new_photo);

/routes/index.js

Configure the AWS-SDK

var fs = require('fs');
var AWS = require('aws-sdk');
AWS.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_KEY
});
var s3 = new AWS.S3();

The upload handler

Assignment

Most important - Continue working on your final web projects.

Sign up for Amazon AWS account and create a Bucket on S3. Upload a test file and set the permissions to Public. Test the URL for the file is public.

The S3 code above might not be needed for all projects but you could review the code to see how the connection to S3 was established and how the uploaded object was PUT to Amazon.