After a recent discussion with a customer, it was apparent they wanted to allow their end users to upload files direct to the Amazon S3 file storage service from an Ext JS 4 based app.

It’s possible to do this with a standard HTML form and file input field, and submit the form direct to the Amazon S3 service, however they wanted the ability to do this using standard Ext JS components, but also show a nicely formatted progress bar to the end user, so they are kept informed of the upload progress. This is especially important for large files, or uploading over slow connections.

It turns out it’s relatively simple to upload direct to Amazon S3 using XHR2 and CORS, however you do need to have a service or page on your server that can “sign” the request by returning a signed URL, thereby certifying the file upload to Amazon S3 as being a valid request. The server-side page needs to use your Amazon S3 Secret Key to sign a request, based on the file name and its MIME type. This needs to return a URL to where the file should be uploaded on Amazon S3, and tag on some extra query string parameters, such as the Public S3 key, an Expiry date of the request, and an encrypted Signature. This encrypted signature is also calculated on Amazon S3’s side, and presumably if they match then the upload is permitted.

I found a good example of how to do this in JavaScript along with standard HTML form elements here, so I started porting this kind of functionality over for use in Ext JS.

I ended up creating my own “AmazonS3″ class, with a method called “uploadFile” that allows an Ext JS FileUploadField to be passed to it, and this will do the upload for you, and show a progress bar on screen based on the progress of the file upload. There are various customisations you can make, e.g. show/hide a Cancel button to abort uploads, and ability to customise the various labels used on the progress bar, along with having callbacks for success/failure/progress/abort.

Feel free to take a look at the finished code on this GitHub repository. I also created some docs using JSDuck that can be found here, and explains how the whole thing works in a lot more detail.

To get this working in your Ext JS project, first of all you need to configure your specific Amazon S3 bucket to accept CORS requests. This is described at the top of this article.

Then, create the signing page on your server. I’ve included a PHP example in the documentation.

Finally, add the AmazonS3.js file to your project, and add the code to commence the file upload, passing in a FileUploadField:

AmazonS3.uploadFile(fileUploadField, {
    signingUrl: 'sign-s3-file.php',
    successCallback: function() {
        console.log('success callback');
    }
});

This then allows end users to upload files direct to the Amazon S3 file storage service. Hopefully this is useful to others wishing to do the same type of thing in their own projects.

An example form configured with a file upload field:

And the modal progress bar window that’s displayed when the upload commences:

Lastly, I’d like to say a quick thanks to Art Kay for his technical hints and tips!