Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
css
 
 
js
 
 
 
 
 
 
 
 
 
 

AngularJS To S3 Upload App

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.

Required Libraries

  • AngularJS
  • AWS JavaScript SDK

CORS Configuration

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.

About

AngularJS To S3 Upload Demo Application

Resources

Releases

No releases published

Packages

No packages published