64

I am developing a website in HTML, javascript & jQuery. I want to upload images to amazon s3 server in an ajax request. There is no such SDK to integrate s3 in Javascript. A PHP SDK is available, but it is not useful to me. Can anybody provide solution to this in javascript?

1
  • you should really change the accepted answer on this question since it is now possible.
    – Jason
    Commented Sep 21, 2012 at 18:32

4 Answers 4

125

Got Amazon S3 & CORS working on js and html5 using XMLHTTPObject based on this article article.

1: CORS only works from a proper URL "http://localhost". (file///xyz will make you go insane)

2 : Make sure you got the POLICY and Secret compiled correctly - here is my policy and this is the link you can get the project to get you started with Signature and Policy -- do not publish this JS with your Secret EVER!

POLICY_JSON = { "expiration": "2020-12-01T12:00:00.000Z",
            "conditions": [
            {"bucket": this.get('bucket')},
            ["starts-with", "$key", ""],
            {"acl": this.get('acl')},                           
            ["starts-with", "$Content-Type", ""],
            ["content-length-range", 0, 524288000]
            ]
          };


    var secret = this.get('AWSSecretKeyId');
    var policyBase64 = Base64.encode(JSON.stringify(POLICY_JSON));
    console.log ( policyBase64 )

    var signature = b64_hmac_sha1(secret, policyBase64);
    b64_hmac_sha1(secret, policyBase64);
    console.log( signature);

Here is the JS code

function uploadFile() {

    var file = document.getElementById('file').files[0];
    var fd = new FormData();

    var key = "events/" + (new Date).getTime() + '-' + file.name;

    fd.append('key', key);
    fd.append('acl', 'public-read'); 
    fd.append('Content-Type', file.type);      
    fd.append('AWSAccessKeyId', 'YOUR ACCESS KEY');
    fd.append('policy', 'YOUR POLICY')
    fd.append('signature','YOUR SIGNATURE');

    fd.append("file",file);

    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.open('POST', 'https://<yourbucket>.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND 

    xhr.send(fd);
  }

Helper functions

function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
    }
    else {
      document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
  }

  function uploadComplete(evt) {
    /* This event is raised when the server send back a response */
    alert("Done - " + evt.target.responseText );
  }

  function uploadFailed(evt) {
    alert("There was an error attempting to upload the file." + evt);
  }

  function uploadCanceled(evt) {
    alert("The upload has been canceled by the user or the browser dropped the connection.");
  }

Then the HTML Form

 <form id="form1" enctype="multipart/form-data" method="post">
<div class="row">
  <label for="file">Select a File to Upload</label><br />
  <input type="file" name="file" id="file" onchange="fileSelected()"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
  <input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>

Happy CORS-ing!

25
  • 2
    Hi folks. This looks like exactly what I'm looking for to upload to my S3 bucket. However, I'm stumped on the first part (ironically, the rest of it looks straight-forward). I'm a total newb when it comes to S3 and to be honest I just don't know what to do with the POLICY_JSON code. In short: where do I put this?
    – AJB
    Commented Jan 2, 2013 at 21:23
  • 4
    Just found this article that explains the anatomy of an AWS upload form in detail: aws.amazon.com/articles/1434
    – AJB
    Commented Jan 2, 2013 at 22:35
  • 3
    This post could definitely be improved if the author would consider explaining what they're doing in the first code example. The link that is referenced has a similar example in Ruby, Java and Python. Biggest problem is, the author neglected to say which libraries are used for Base64 and Crypto. (standard node crypto should work) Commented Jan 7, 2014 at 4:04
  • 3
    @fino I’m confused – either you publish your AWS secret (discouraged) or you sign the form server-side? Which are you advocating, or have I missed something?
    – Benji XVI
    Commented Feb 13, 2015 at 2:05
  • 3
    var xhr = getXMLHTTPObject(); should be var xhr = new XMLHttpRequest(); good script, shame we still need to use crappy iframes for IE8 and 9 Commented Dec 14, 2015 at 17:09
7

Amazon just allowed Cross-Origin Resource Sharing, in theory it allows your users to upload to S3 directly, without using your server (and PHP) as a proxy.

Heres the docs -> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html

They do a great job of telling you how to enable it on an S3 bucket, but iv found no actual javascript examples of how to get data from client to bucket.

First person to post CORS.js is a legend xD

3

You can do this by AWS S3 Cognito try this link here :

http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-examples.html#Amazon_S3

Also try this code

Just change Region, IdentityPoolId and Your bucket name

<!DOCTYPE html>
<html>

<head>
    <title>AWS S3 File Upload</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.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">
    AWS.config.region = 'your-region'; // 1. Enter your region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'your-IdentityPoolId' // 2. Enter your identity pool
    });
    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });
    var bucketName = 'your-bucket'; // Enter your bucket name
    var bucket = new AWS.S3({
        params: {
            Bucket: bucketName
        }
    });
    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) {
            results.innerHTML = '';
            var objKey = 'testing/' + file.name;
            var params = {
                Key: objKey,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };
            bucket.putObject(params, function(err, data) {
                if (err) {
                    results.innerHTML = 'ERROR: ' + err;
                } else {
                    listObjs(); // this function will list all the files which has been uploaded
                    //here you can also add your code to update your database(MySQL, firebase whatever you are using)
                }
            });
        } else {
            results.innerHTML = 'Nothing to upload.';
        }
    }, false);
    function listObjs() {
        var prefix = 'testing';
        bucket.listObjects({
            Prefix: prefix
        }, function(err, data) {
            if (err) {
                results.innerHTML = 'ERROR: ' + err;
            } else {
                var objKeys = "";
                data.Contents.forEach(function(obj) {
                    objKeys += obj.Key + "<br>";
                });
                results.innerHTML = objKeys;
            }
        });
    }
    </script>
</body>

</html>

If needed you can use github Link

I hope it will help others :)

1
  • I am getting a 403 Commented Sep 17, 2018 at 1:46
0

For the authentication part,

No php code, no server, no large JS code except below;

you might use AWS Cognito IdentityPoolId as credential, less code but you are required to create AWS Cognito IdetityPool and attach policy, simply s3 write access.

     var IdentityPoolId = 'us-east-1:1...........';


     AWS.config.update({
        credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: IdentityPoolId
        })
     });

4
  • how can i get the IdentityPoolId can you please explain a little bit Thanks. Commented Jul 22, 2017 at 7:43
  • And simply allow everyone who sniffs out your Cognito token from a simple network traffic analyzer to get authorization to dump files in your S3 bucket for free continously without your control. Thats the cost of "no code no server no large JS"
    – user5890979
    Commented Jul 24, 2017 at 23:56
  • you must forgotten there is thing like https Commented Nov 23, 2017 at 14:09
  • A Cognito token is yet another JWT token, i assume if you upload to a server whose security mechanism is the same it will be as prone to traffic analyzer as Cognito. Skipping the server for a largely bandwidth intensive task like uploading an binary image to s3 has its benefits and drawbacks. In general JWT tokens shouldn't be long lived, CORS settings at the S3 bucket should be sensible and not '*' on everything, Lambda post hook triggers can be setup at S3 to validate each upload are things that can be done to prevent unauthorized uploads.
    – HJW
    Commented Jul 26, 2018 at 3:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.