Angular 4 Amazon S3 example – How to upload File to S3 Bucket

Amazon Simple Storage Service (Amazon S3) is object storage built to store and retrieve any amount of data from web or mobile. Amazon S3 is designed to make web-scale computing easier for developers. In this tutorial, we’re gonna create an Angular 4 App that can upload files to Amazon S3 Bucket.

More Practice:
Angular 4 Amazon S3 example – How to get list Files from S3 Bucket
Angular 4 Amazon S3 example – How to delete File from S3 Bucket

I. Technology

– Angular 4
– AWS SDK

II. How to do

1. Set up Amazon S3
1.1 Create an IAM user

We need to provide access permission bucket. So follow these step to create an IAM user and get Access key ID and Secret access key:

Go to https://console.aws.amazon.com/iam/
In the navigation pane, choose Users and then choose Add user.

springboot amazon s3 starter - choose user

Input User name, choose Programmatic access for Access type:

amazon s3 starter - add user info

Press Next: Permissions button -> go to Set permissions for jsa-user screen.
Now, choose Attach existing policies directly -> filter policy type s3, then check AmazonS3FullAccess:

amazon s3 starter - add policies

Press Next: Review:

amazon s3 starter - review policies

Press Create user:

Press Download .csv for {Access key ID, Secret access key}.

1.2 Create Amazon S3 Bucket

– Go to https://console.aws.amazon.com/s3, click on Create bucket:

– Input information for creating bucket, then click on Create:

amazon-s3-angular4-create-bucket

1.3 Configure CORS for Bucket

– Click on the Bucket we have just created:

amazon-s3-angular4-configure-bucket

– Choose Permission tab, then CORS Configuration:

amazon-s3-angular4-configure-bucket-cors

– Configure CORS for Bucket, then click on Save button.

2. Install AWS SDK

Run this: npm install aws-sdk.

After installing, we can see aws-sdk inside node-modules folder:

amazon-s3-angular4-install-aws-sdk

3. Use AWS SDK

– import AWS and S3 from aws-sdk:

– use accessKeyId & secretAccessKey from the step above to construct S3 bucket.
– call S3 bucket upload() method with input params containing Bucket for bucket’s name, Key for full path, Body for data file.

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 4 Firebase App that can help user choose file from local and upload it to Amazon S3 Bucket:

amazon-s3-angular4-demo

1.2 Structure

amazon-s3-angular4-structure

2. Step by step
2.1 Set up Angular 4 Project integrating with AWS SDK

Create your own Angular 4 Project, then follow the steps above to integrate AWS SDK.

2.2 Setup @NgModule

2.3 Upload Service

2.4 Form Upload Component

form-upload.component.html

form-upload.component.ts

2.5 App Component

app.component.html

app.component.ts

2.6 Check Result

Run the App, go to http://localhost:4200/.

amazon-s3-angular4-demo

After uploading files:
– Console:
amazon-s3-angular4-result-upload

– S3 Bucket https://console.aws.amazon.com/s3/buckets/jsa-angular4-bucket/jsa-s3:
amazon-s3-angular4-result-bucket

IV. Source Code

Angular4AmazonS3-upload-files

By JavaSampleApproach | January 30, 2018.

Related Posts


18 thoughts on “Angular 4 Amazon S3 example – How to upload File to S3 Bucket”

  1. ERROR in node_modules/aws-sdk/clients/acm.d.ts(124,37): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/acm.d.ts(126,38): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/acm.d.ts(460,32): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/acm.d.ts(462,32): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/acmpca.d.ts(271,37): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/acmpca.d.ts(273,38): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/acmpca.d.ts(341,25): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/apigateway.d.ts(1146,23): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/appsync.d.ts(248,23): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/clouddirectory.d.ts(1469,38): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/cloudsearchdomain.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
    node_modules/aws-sdk/clients/cloudsearchdomain.d.ts(42,23): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/cloudtrail.d.ts(141,28): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/codecommit.d.ts(634,29): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/codecommit.d.ts(1601,22): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/cognitoidentityserviceprovider.d.ts(2581,31): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/directconnect.d.ts(992,28): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/dms.d.ts(448,35): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/dynamodb.d.ts(482,38): error TS2304: Cannot find name ‘Buffer’.
    node_modules/aws-sdk/clients/dynamodbstreams.d.ts(92,38): error TS2304: Cannot find name ‘Buffer’……..

    1. in your tsconfig.app.json file put this

  2. Good article!
    I learned easy to upload, thank you
    Now I need to download the file. How do you download the file?

  3. Hello,
    I need to know if i want to upload to different folders in S3 and I want to make my angular app upload to a specific folder. is such thing can be done?

  4. accessKeyId: ‘YOUR-ACCESS-KEY-ID’,
    secretAccessKey: ‘YOUR-SECRET-ACCESS-KEY’,

    are exposed to user. Anyone can take these keys and submit anything to your bucket.

    How will you prevent that?

    1. Yes this is definitely a security problem with this approach of directly uploading files from the browser aka angular app. Then again you will have to choose whether you want the file to round trip via your server to S3 since that is lets say uploading a 100MB file first to your server and then to S3.

  5. i would like the component to receive the data object from the bucket.upload callback function. do you have any thoughts/guidance on this?

  6. Hello Sir,
    Thanks for your explanation.

    I am getting the following error message when I try to upload using the aws-sdk in my angular 2 code.

    zone.js:2935 OPTIONS https://lifelab-assets-main.s3.amazonaws.com/consent-form/abc.pdf 403 (Forbidden)

    Failed to load https://lifelab-assets-main.s3.amazonaws.com/consent-form/abc.pdf: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 403.

    There was an error uploading your file: Error: Network Failure

    Please help me how to resolve this issue.

    Thanks
    Ankush

Got Something To Say:

Your email address will not be published. Required fields are marked *

*