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.