A sample application written using AngularJS and the AWS JS SDK to demonstrate uploading files to AWS S3 using only JavaScript.
The blog article to accompany this project can be found here
You can view a live demo of this application here
Other libraries were used for aesthetic purposes but AngularJS and the AWS JS SDK are the only required libraries.
- AngularJS
- AWS JavaScript SDK
You will need to add a CORS policy to your AWS bucket to allow uploads from this app. Details on how to add this policy to your bucket can found in the blog mentioned above, under the CORS section Here's a sample policy that you can use
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://localhost:3000</AllowedOrigin>
<AllowedOrigin>https://www.yourdomain.com</AllowedOrigin>
<AllowedOrigin>http://staging.yourdomain.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
<ExposeHeader>x-amz-request-id</ExposeHeader>
<ExposeHeader>x-amz-id-2</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
On OSX run bash start_server.sh to start a python HTTP server for the app. Then simply visit http://localhost:8000
The AWS JS SDK is huge. In this application, for simplicity, I have used bower to install the AWS JS SDK, although it weighs in at around 230KB even when minified. I would recommend lazy loading the library only when needed.
I was able to shave about 50KB off the file size by compiling an older version of the SDK using the NodeJS modules mentioned here: Compiling The AWS SDK
The command used to compile and minify only the S3 components
MINIFY=1 node dist-tools/browser-builder.js s3 > aws-sdk.min.js
I have included a copy of my custom built aws-sdk.js under aws-sdk-custom in the components directory of this repo.