AngularJS To S3 Upload App
Other libraries were used for aesthetic purposes but AngularJS and the AWS JS SDK are the only required libraries.
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>
Python HTTP Server
On OSX run bash start_server.sh to start a python HTTP server for the app. Then simply visit http://localhost:8000
Compiling The AWS JS SDK
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.