S3: Uploading documents, images, videos to a Bucket, AWS JavaScript SDK

Use the AWS SDK to upload images into your S3 buckets

– for this article it’s assumed you have a root user and S3 services account with Amazon.

Setup a IAM Account

If you aren’t familiar with IAM, the AWS Identity and Access Management (IAM) web service, get started here on the introduction to IAM before proceeding. We will be using IAM and the group permission policy provided by AWS.

Using your root user to consume AWS APIs reduces security and is not consistent with AWS best practices.

Go set up an IAM account now, if you haven’t yet. Pay attention and make sure you save off your secret access key, you only get one opportunity.

This is your only opportunity to view or download the secret access keys, and you must provide this information to your users before they can use the AWS API. Save the user's new access key ID and secret access key in a safe and secure place. You will not have access to the secret keys again after this step.

– http://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html#id_users_create_console

Getting started using the JavaScript SDK to upload documents and images

Amazon provides their own example for working with the JavaScript SDK here. My problem with this is that you came here to learn to work with S3, not Facebook. In many instances, using a 3rd party authorization services, like Facebook or Google+, isn’t going to be an option. What I am providing you here, is a simple example, without the extra layers of unwanted tech involved.

First, we are going to need to bring in the AWS JavaScript SDK, which you can download and run locally if you want to.  This file is the AWS JavaScript SDK found here. Within AWS, you are able to custom build your SDK, minimizing the amount of overhead in your application, or you can choose to run the default build, like in this example.

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.19.0.min.js"></script>

Next, we are going to need to put in an interface to our file dialog, and so we can see what’s happening, a placeholder for our status messages.

<input type="file" id="file-chooser" />
<button id="upload-button">Upload to S3</button>
<div id="results"></div>

After that, we need to add our script to take advantage of the SDK. Our script is going to be made up of some public members for our DOM elements and a listener for our click event.

Inside our event listener, we are going to setup our call to AWS. The call requires our access key and secret key. Hope you remembered to write that down! We are also going to need to provide a region, which is important for speed and redundancy, within the AWS atmosphere.

You will need to have a bucket setup in the S3 console, and to make sure that your IAM user account has the proper permissions for that bucket. While it’s best to setup a more focused group permissions within AWS, for now the default S3 policy will work. This policy will reside within the AWS console.

Here is what the AmazonS3FullAccess policy includes:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": "*"
        }
    ]
}

Finally our script:

It is important to note that while the example provided is using hard coded values within the config, you want to protect these values by not hard coding them in production code.

<script type="text/javascript">    
    var fileChooser = document.getElementById('file-chooser');
    var button = document.getElementById('upload-button');
    var results = document.getElementById('results');
    button.addEventListener('click', function () {
        var file = fileChooser.files[0];
        if (file) {            
            AWS.config.update({
                "accessKeyId": "[SECRET KEY]",
                "secretAccessKey": "[SECRET ACCESS KEY]",
                "region": "us-east-1"
            });
            var s3 = new AWS.S3();
            var params = {
                Bucket: '[YOUR-BUCKET]',
                Key: file.name,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };        
            s3.putObject(params, function (err, res) {
                if (err) {
                    results.innerHTML = ("Error uploading data: ", err);
                } else {
                    results.innerHTML = ("Successfully uploaded data");
                }
            });
        } else {
            results.innerHTML = 'Nothing to upload.';
        }
    }, false);
</script>

The full sample for the JavaScript SDK

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
    <title>AWS SDK for JavaScript - Sample Application</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.19.0.min.js"></script>
</head>
<body>
    <input type="file" id="file-chooser" />
    <button id="upload-button">Upload to S3</button>
    <div id="results"></div>
    <script type="text/javascript">    
        var fileChooser = document.getElementById('file-chooser');
        var button = document.getElementById('upload-button');
        var results = document.getElementById('results');
        button.addEventListener('click', function () {
            var file = fileChooser.files[0];
            if (file) {            
                AWS.config.update({
                    "accessKeyId": "[SECRET KEY]",
                    "secretAccessKey": "[SECRET ACCESS KEY]",
                    "region": "us-east-1"
                });
                var s3 = new AWS.S3();
                var params = {
                    Bucket: '[YOUR-BUCKET]',
                    Key: file.name,
                    ContentType: file.type,
                    Body: file,
                    ACL: 'public-read'
                };        
                s3.putObject(params, function (err, res) {
                    if (err) {
                        results.innerHTML = ("Error uploading data: ", err);
                    } else {
                        results.innerHTML = ("Successfully uploaded data");
                    }
                });
            } else {
                results.innerHTML = 'Nothing to upload.';
            }
        }, false);
    </script>
</body>
</html>



Curious how to insert great code snippets of your own into your wordpress site? Check out Code Snippets CPT.

A Web Developer by trade, find me on Github
A motorcycle enthusiast at heart.
Most days I’d rather be in the woods anywhere.
I can be reached at pswoutlaw@adventure-us.guide

Let us know how you liked this article. Did we cover everything? Was this helpful to you? Is there a topic you wish we would cover. Let us know below, we love to hear your comments!