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

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


1.2 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


2.6 DetailsUpload Component



2.7 ListUpload Component



2.8 App Component



2.9 Check Result

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

– Upload files, then click on Show Files button:

– S3 Bucket

IV. Source Code


By JavaSampleApproach | January 31, 2018.

Related Posts

Got Something To Say:

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