S3: Read Files From a Bucket, AWS JavaScript SDK

Use the AWS SDK to Read File from an S3 bucket

– 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 you can 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 to when you are given your secret access key and make sure you save off. You are only offered it once and if you do not save the key you will have to delete your account and start over.

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 read the contents of a bucket

Amazon provides their own example using for working with the JavaScript SDK here. The 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 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 a button so we can trigger our listener and a placeholder for our response messages.

<button id="button">Do something</button>
<div id="results"></div>    

Now 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. Hopefully 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 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:

<script type="text/javascript">    
    var button = document.getElementById('button');    
    var results = document.getElementById('results');
    var contentLength = 0;
    button.addEventListener('click', function () {
        AWS.config.update({
            "accessKeyId": "[ACCESS KEY]",
            "secretAccessKey": "[SECRET ACCESS KEY]",
            "region": "us-east-1"
        });
        var s3 = new AWS.S3();            
        var params = {
            Bucket: "[YOUR-BUCKET]",
            Delimiter: "/",
            EncodingType: "url"
        };        
        s3.listObjects(params, function (err, response) {
            if (err) {
                results.innerHTML = ("Error uploading data: ", err);
            } else {
                contentLength = response.Contents.length;
                for(var i = 0; i < contentLength; i++){
                    results.insertAdjacentHTML('beforeend', '<a href="https://s3.amazonaws.com/' 
                    + params.Bucket + "/" 
                    + response.Contents[i].Key 
                    + '" target="_blank">' 
                    + response.Contents[i].Key 
                    + '</a><br/>');
                }
                console.log(response)
            }                
        });
    }, false);
</script>

Note that in our parameters now, we need to specify which Bucket we want to read from, if the user who made the call doesn’t have the correct permissions on their account the response is going to be access denied. We also need to provide a delimiter and encoding type which will be URL.

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>
    <button id="button">Do something</button>
    <div id="results"></div>    
    <script type="text/javascript">    
        var button = document.getElementById('button');    
        var results = document.getElementById('results');
        var contentLength = 0;
        button.addEventListener('click', function () {
            AWS.config.update({
                "accessKeyId": "[ACCESS KEY]",
                "secretAccessKey": "[SECRET ACCESS KEY]",
                "region": "us-east-1"
            });
            var s3 = new AWS.S3();            
            var params = {
                Bucket: "[YOUR-BUCKET]",
                Delimiter: "/",
                EncodingType: "url"
            };        
            s3.listObjects(params, function (err, response) {
                if (err) {
                    results.innerHTML = ("Error uploading data: ", err);
                } else {
                    contentLength = response.Contents.length;
                    for(var i = 0; i < contentLength; i++){
                        results.insertAdjacentHTML('beforeend', '<a href="https://s3.amazonaws.com/' 
                        + params.Bucket + "/" 
                        + response.Contents[i].Key 
                        + '" target="_blank">' 
                        + response.Contents[i].Key 
                        + '</a><br/>');
                    }
                    console.log(response)
                }                
            });
        }, false);
    </script>
</body>
</html>




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