AngularJS To S3 Upload With AWS JS SDK

---

Blog Post

You can find the blog post that accompanies this app here

---

Features

• Creates Unique Bucket Object Name
• File Input Directive Binds Attributes To $scope.file
• Validates File Existence
• Validates File Size (Use Select Box To Test)
• Validates AWS Credentials

---

CORS Policy

In order for the demo to work, you will need to add a CORS policy to your AWS bucket to allow uploads from this page (or from your local machine if using the local repo). Details on how to add this policy can found in this article, under the CORS section
Here's a sample policy that you can use to test this demo app

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://localhost:8000</AllowedOrigin>
        <AllowedOrigin>http://cheynewallace.github.io</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>

---

IAM Policy Warning

Please make sure that if you use this code you create an appropriate IAM account policy to prevent mis-use. Example, a policy like the following would only allow PUT access to the bucket for a specific IAM user. You could also set the bucket objects to automatically expire after 24 hours which would prevent people flooding your account.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt126637111000",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject"
      ],
      "Resource": [
        "arn:aws:s3:::your_bucket_name"
      ]
    }
  ]
}

---

Fork This Repo

Want a copy of this app? Fork it now at: https://github.com/cheynewallace/angular-s3-upload