Get started

This is a fully functional Angular 6 App to upload to S3 directly from browser using Cognito user and identity pools. For architecture and background details go here.

Software Installation

Git
NodeJS

Configure with your own AWS account

Amazon S3 Setup

Create Bucket for upload your objects.
- Note: S3 bucket name should be globally unique.
Enable CORS on S3 bucket with following CORS permissions.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Video instructions are available at https://www.screencast.com/t/SWEq2r1Kx

Amazon Cognito Setup

Create cognito user pool.
- Video instructions are available at https://www.screencast.com/t/Njwyv1v6Se9
Create cognito identity pool and associate with user pool. Note : Associate role for authenticated users with cognito identity pool with PutObject permission to the S3 buckets. You can also refer to the my identity pool policy.
- Video instructions are available at https://www.screencast.com/t/Mrd4zbvCLN

Workspace setup

git clone https://github.com/tensult/ngx-s3-upload.git
cd ngx-s3-upload

Configurations

Update the bucket details and your s3 bucket default region:src/config/s3.ts accordingly.
Update google analytics code: src/index.html accordingly.
Update src/config/cognito.ts accordingly.
Video instruction are available at https://www.screencast.com/t/MfzWbYHkvSsR

Starting the App

npm install
npm start

Once app is successfully started: open http://localhost:4200/ in your browser

Go to http://localhost:4200
Video instructions are available at https://www.screencast.com/t/ncqBeM2mW7D

S3 website Bucket setup for hosting the web app

Create a user in Cognito User Pools

Video instructions are available at :https://www.screencast.com/t/ye42zx51

Sample Screens

Home page

When you start application, first this page will be opened.

Signin page

You have to do signin first for accessing upload feature.

Upload page

After signin this page will be opened.
You can add one file or multiple files by clicking on add files button.
After adding one file or multiple files, you can upload those files by clicking on upload all button or individually by clicking on upload button.
Also you can clear and cancel.
You can signout by clicking on signout link.

Uploaded files page

After clicking on Downloads link from upload page, this page will be opened.
Here you can see those files you uploaded.
Video instructions are available at https://www.screencast.com/t/JuauJmxQf

Hosting a Static Website on Amazon S3

Create a new bucket on Amazon S3 for static website hosting.
Update bucket policy on s3 bucket with the following policy

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "Allow Public Access to All Objects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3-website-hosting/*"
        }
    ]
}

Build your App

npm run build

Upload the build files on S3 bucket.
In static website hosting choose "Use this bucket to host a website" option and put index.html in Index document option.
Click the endpoint url generated on s3 bucket.
Video instructions are available at: https://www.screencast.com/t/IaQm07kq6

Note: We are uploading files at a folder named by your email in S3 bucket.

MMichael-S/ngx-s3-upload