Angular 4 Amazon S3 example – How to delete File from S3 Bucket

angular-4-amazon-s3-example-delete-file-from-s3-bucket-feature-image

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.

Last updated on September 15, 2018.



Related Posts


Got Something To Say:

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

*