Skip to content

tensult/ngx-s3-upload

Repository files navigation

Donate

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

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>

s3corspolicy

Amazon Cognito Setup

Workspace setup

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

Configurations

Starting the App

npm install
npm start

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

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. home

Signin page

  • You have to do signin first for accessing upload feature. signin

Upload page

  • After signin this page will be opened.
  • You can add one file or multiple files by clicking on add files button. upload
  • 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. upload-1
  • You can signout by clicking on signout link. signout

Uploaded files page

  • After clicking on Downloads link from upload page, this page will be opened.
  • Here you can see those files you uploaded. downloads
  • 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.