How to implement plupload directly to s3 with 'html5' runtime?

Question

It is mentioned in this very related question (Upload directly to Amazon S3 using Plupload HTML5 runtime) that amazon now allows CORS uploads using HTML5, but has anyone successfully configured plupload to push files to s3 using the 'html5' runtime? Responses to the related question do not offer any implementation details.

Here is my current plupload configuration:

$("#uploader").plupload({
    // General settings
    runtimes: 'html5,flash',
    url: 'http://s3.amazonaws.com/' + $('#Bucket').val(),
    max_file_size: '20mb',
    multipart: true,
    multipart_params: {
        'key': '${filename}', // use filename as a key
        'Filename': '${filename}', // adding this to keep consistency across the runtimes
        'acl': $('#Acl').val(),
        'Content-Type': 'binary/octet-stream',
        'success_action_status': '201',
        'AWSAccessKeyId': $('#AWSAccessKeyId').val(),
        'policy': $('#Policy').val(),
        'signature': $('#Signature').val()
    },
    file_data_name: 'file',
    multiple_queues: true,
    filters: [
        { title: "Image files", extensions: "jpg,png,gif,jpeg" }
    ],
    flash_swf_url: '/Scripts/plupload/plupload.flash.swf',
});

The above code is working for the 'flash' runtime, so the policy is generated and signed correctly.

Am I missing any arguments in the multipart_params configuration object?

Also, I am using the following CORS configuration on my s3 bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Do I need to make any other configuration changes to the s3 bucket to allow CORS uploads from the 'html5' plupload runtime?

Answer 1

Here's the exact code I used to get this to work...

var params = {};

        $('#uploader').pluploadQueue({
            runtimes: 'html5,flash',
            flash_swf_url: '/js/plupload/1.5.4/plupload.flash.swf', // Have to load locally
            url: 'https://s3.amazonaws.com/my-bucket-name',
            multiple_queues: true,
            preinit: {
                UploadFile: function (up, file) {
                    up.settings.multipart_params = {
                        key: file.name,
                        filename: file.name,
                        AWSAccessKeyId: 'my-aws-access-key',
                        acl: 'private',
                        policy: params[file.name]["policy"],
                        signature: params[file.name]["signature"],
                        success_action_status: '201'
                    }
                }
            },
            init: {
                FilesAdded: function (up, files) {
                    plupload.each(files, function (file) {

                        $.ajax({
                            url: '/r/prepare_raw_upload',
                            type: 'post',
                            data: {
                                acl: 'private',
                                bucket: 'my-bucket-name',
                                file: file.name
                            },
                            success: function (data) {
                                if (data.success) {
                                    params[data.file] = { policy: data.policy, signature: data.signature };
                                }
                                else if (data.message) {
                                    alert(data.message);
                                }
                            }
                        });

                    });
                }
            }
        });

You'll notice in the FilesAdded event listener I have an ajax call. This retrieves the policy and the signature from my server for each file added.

Here's the code on the back that sends back the policy and signature

public static Dictionary<string, object> prepareUpload(DateTime now, string acl, string bucket, string key, string file)
    {
        Dictionary<string, object> result = new Dictionary<string, object>();
        ASCIIEncoding encoding = new ASCIIEncoding();

        string policy = createUploadPolicy(now, acl, bucket, key);
        result.Add("policy", Convert.ToBase64String(encoding.GetBytes(policy)));
        result.Add("signature", createUploadSignature(policy));
        result.Add("file", file);

        return result;
    }

    public static string createUploadPolicy(DateTime now, string acl, string bucket, string key)
    {
        ASCIIEncoding encoding = new ASCIIEncoding();
        JavaScriptSerializer jss = new JavaScriptSerializer();

        Hashtable policy = new Hashtable();
        policy.Add("expiration", now.AddDays(1).ToString("yyyy'-'MM'-'dd'T'HH':'mm':'ss.fff'Z'"));
        ArrayList conditions = new ArrayList();
        conditions.Add(new Hashtable { { "acl", acl } });
        conditions.Add(new Hashtable { { "bucket", bucket } });
        conditions.Add(new Hashtable { { "key", key } });
        conditions.Add(new ArrayList { "starts-with", "$name", "" });
        conditions.Add(new ArrayList { "starts-with", "$filename", "" });
        conditions.Add(new ArrayList { "starts-with", "$success_action_status", "" });
        policy.Add("conditions", conditions);

        return jss.Serialize(policy);
    }

    public static string createUploadSignature(string policy)
    {
        ASCIIEncoding encoding = new ASCIIEncoding();
        byte[] policyBytes = encoding.GetBytes(policy);
        string policyBase64 = Convert.ToBase64String(policyBytes);

        byte[] secretKeyBytes = encoding.GetBytes(ConfigurationManager.AppSettings["AWSSecretKey"]);
        HMACSHA1 hmacsha1 = new HMACSHA1(secretKeyBytes);

        byte[] policyBase64Bytes = encoding.GetBytes(policyBase64);
        byte[] signatureBytes = hmacsha1.ComputeHash(policyBase64Bytes);

        return Convert.ToBase64String(signatureBytes);
    }

Very helpful links in making this work were...

How do I make Plupload upload directly to Amazon S3?

http://codeonaboat.wordpress.com/2011/04/22/uploading-a-file-to-amazon-s3-using-an-asp-net-mvc-application-directly-from-the-users-browser/