Angular 4 Amazon S3 example – How to upload File to S3 Bucket
Tags: angular, springboot, s3, amazon
Published: 2021-04-26 18:03:03

https://grokonez.com/aws/angular-4-amazon-s3-example-how-to-upload-file-to-s3-bucket

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:
- <a href="https://grokonez.com/frontend/angular-4-amazon-s3-example-get-list-files-from-s3-bucket">Angular 4 Amazon S3 example – How to get list Files from S3 Bucket</a>
- <a href="https://grokonez.com/frontend/angular-4-amazon-s3-example-delete-file-from-s3-bucket">Angular 4 Amazon S3 example – How to delete File from S3 Bucket</a>

<!--more-->
<h2>I. Technology</h2>
– Angular 4
– AWS SDK
<h2>II. How to do</h2>
<h3>1. Set up Amazon S3</h3>
<h4>1.1 Create an IAM user</h4>
We need to provide access permission bucket. So follow these step to create an IAM user and get <strong>Access key ID</strong> and <strong>Secret access key</strong>:

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

<img src="https://grokonez.com/wp-content/uploads/2017/07/amazon-s3-starter-choose-user.png" alt="springboot amazon s3 starter - choose user" width="434" height="307" class="alignnone size-full wp-image-6965" />

Input <strong>User name</strong>, choose <strong>Programmatic access</strong> for <strong>Access type</strong>:

<img src="https://grokonez.com/wp-content/uploads/2017/07/amazon-s3-starter-add-user-info-1.png" alt="amazon s3 starter - add user info" width="700" height="444" class="alignnone size-full wp-image-6974" />

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

<img src="https://grokonez.com/wp-content/uploads/2017/07/amazon-s3-starter-add-policies.png" alt="amazon s3 starter - add policies" width="704" height="670" class="alignnone size-full wp-image-6967" />

Press <strong>Next: Review</strong>:

<img src="https://grokonez.com/wp-content/uploads/2017/07/amazon-s3-starter-review-policies.png" alt="amazon s3 starter - review policies" width="732" height="439" class="alignnone size-full wp-image-6968" />

Press <strong>Create user</strong>:

<img src="https://grokonez.com/wp-content/uploads/2017/07/amazon-s3-starter-got-access-key.png" alt="" width="761" height="367" class="alignnone size-full wp-image-6972" />

Press <strong>Download .csv</strong> for {<strong>Access key ID</strong>, <strong>Secret access key</strong>}.
<h4>1.2 Create Amazon S3 Bucket</h4>
- Go to <code>https://console.aws.amazon.com/s3</code>, click on <strong>Create bucket</strong>:

<img src="https://grokonez.com/wp-content/uploads/2017/07/amazon-s3-starter-create-bucket-1.png" alt="" width="318" height="225" class="alignnone size-full wp-image-6983" />

- Input information for creating bucket, then click on <strong>Create</strong>:

<img src="https://grokonez.com/wp-content/uploads/2018/01/amazon-s3-angular4-create-bucket.png" alt="amazon-s3-angular4-create-bucket" width="672" height="535" class="alignnone size-full wp-image-10458" />
<h4>1.3 Configure CORS for Bucket</h4>
- Click on the Bucket we have just created:

<img src="https://grokonez.com/wp-content/uploads/2018/01/amazon-s3-angular4-configure-bucket.png" alt="amazon-s3-angular4-configure-bucket" width="444" height="299" class="alignnone size-full wp-image-10459" />

- Choose <strong>Permission</strong> tab, then <strong>CORS Configuration</strong>:

<img src="https://grokonez.com/wp-content/uploads/2018/01/amazon-s3-angular4-configure-bucket-cors.png" alt="amazon-s3-angular4-configure-bucket-cors" width="700" height="480" class="alignnone size-full wp-image-10460" />

https://grokonez.com/aws/angular-4-amazon-s3-example-how-to-upload-file-to-s3-bucket

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