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.

Installation

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

Starting the App

ng serve

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

Configure with your own AWS account

Amazon S3 Setup

Create Bucket for uploads and update the bucket details and your s3 bucket default region:src/config/s3.ts accordingly.
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>

Amazon Cognito Setup

Create cognito user pool.
Create cognito identity pool and associate with user pool.
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.
Update src/config/cognito.ts accordingly.

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.

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

unixvb/ngx-s3