Angular 4 Amazon S3 example – How to get list Files from 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 previous post, we had known how to upload file to Amazon S3. This tutorial will help you create an Angular 4 App that can get list Files from Amazon S3 Bucket.

Related Post: Angular 4 Amazon S3 example – How to upload File to S3 Bucket

I. Technology

– Angular 4
– AWS SDK

II. How to do

1. Set up Angular 4 Project integrating with AWS SDK

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

2. Upload with pre-set Access Control List (ACL)

Amazon S3 access control lists (ACLs) enable you to manage access to buckets and objects. It defines which AWS accounts or groups are granted access and the type of access.

Amazon S3 supports a set of predefined grants, known as canned ACLs which predefined a set of grantees and permissions. Some of them are:
private: Owner gets FULL_CONTROL. No one else has access rights (default).
public-read: Owner gets FULL_CONTROL. The AllUsers group (see Who Is a Grantee?) gets READ access.
public-read-write: Owner gets FULL_CONTROL. The AllUsers group gets READ and WRITE access. Granting this on a bucket is generally not recommended.
authenticated-read: Owner gets FULL_CONTROL. The AuthenticatedUsers group gets READ access.
– …

In this example, we use public-read:

It will help us can directly download file from url.

3. Get list Files

Use listObjects() method to get list files from bucket, files array will be in data.Contents:

4. Display list Files

To display them, we will work with Observable object:
– Upload Service to work with S3 Bucket:

– Display list files component:

– HTML component with ngFor and async:

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 4 Firebase App that can:
– helps user choose file from local and upload it to Amazon S3 Bucket
– display list files from Amazon S3 Bucket

amazon-s3-angular4-get-list-files-goal

1.2 Structure

amazon-s3-angular4-get-list-files-structure

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

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

2.2 Setup @NgModule

2.3 Model Class

2.4 Upload Service

2.5 Form Upload Compoment

form-upload.component.html:

2.6 DetailsUpload Component

details-upload.component.ts

details-upload.component.html

2.7 ListUpload Component

list-upload.component.ts

list-upload.component.html

2.8 App Component

app.component.ts

app.component.html

2.9 Check Result

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

– Upload files, then click on Show Files button:
amazon-s3-angular4-get-list-files-result

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

IV. Source Code

Angular4AmazonS3-get-list-files

By grokonez | January 31, 2018.



Related Posts


2 thoughts on “Angular 4 Amazon S3 example – How to get list Files from S3 Bucket”

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

    I want to use environment variable instead of exposing secret key like this. Is there any way I can achieve that?

Got Something To Say:

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

*