Angular 4 Amazon S3 example – How to delete File 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 & get files to/from Amazon S3. This tutorial will help you create an Angular 4 App that can do one more thing: delete File from Amazon S3 Bucket.

Related Posts:
Angular 4 Amazon S3 example – How to upload File to S3 Bucket
Angular 4 Amazon S3 example – How to get list Files from 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. Delete File from S3 Bucket

Use deleteObject() method with input params containing file’s Key:

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
(from previous post)
– delete file from Amazon S3 Bucket

amazon-s3-angular4-delete-file

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

amazon-s3-angular4-delete-file-demo

Click on Delete button for an item, then show Files again:

amazon-s3-angular4-delete-file-result

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

amazon-s3-angular4-delete-file-result-bucket

IV. Source Code

Angular4AmazonS3-upload-read-delete-file

By grokonez | February 1, 2018.



Related Posts


Got Something To Say:

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

*