Angular 4 Firebase – Delete File from Storage

In previous post, we have known how to upload file, then get list files from Firebase Storage. This tutorial shows you way to delete specific File in the List with a simple Angular 4 App.

Related Posts:
How to integrate Firebase with Angular 4
Angular 4 Firebase – Upload File to Storage
Angular 4 Firebase – Get List Files from Storage

I. Technology

– Angular 4
– AngularFire2 4.0

II. How to do

1. Set up the Firebase Project & integrate Firebase with Angular 4 App

Please visit this post to know step by step.

2. Upload File Service

We delete a file:
– from Firebase Storage by its name using:
AngularFireDatabase.list(basePath).remove(key)
– info from Firebase Database by its key using:
firebase.storage.Reference.child(basePath/name).delete()

3. Delete file function in Component

HTML template:

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 Firebase Storage
– show progress with percentage
– save metadata to Firebase Realtime Database
– display list files from Firebase Storage
(previous post‘s functions above)
– delete specific file in list

angular-4-firebase-storage-delete-file-overview

1.2 Structure

angular-4-firebase-storage-get-list-files-structure

2. Step by step
2.1 Set up the Firebase Project & integrate Firebase with Angular 4 App

Please visit this post to know step by step.

angular-4-firebase-integration-copy-firebase-project-config

2.2 Add Firebase config to environments variable

Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:

2.3 Setup @NgModule

2.4 Model Class

2.5 Service

2.6 Form Upload Compoment

form-upload.component.html:

2.7 DetailsUpload Component

details-upload.component.ts

details-upload.component.html

2.8 ListUpload Component

list-upload.component.ts

list-upload.component.html

2.9 App Component

app.component.ts

app.component.html

2.10 Check Result

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

angular-4-firebase-storage-delete-file-overview

Click delete any file:
angular-4-firebase-storage-delete-file-result

Check Firebase Console, the file that we deleted disappears:
– Database:
angular-4-firebase-storage-upload-file-result-database

– Storage:
angular-4-firebase-storage-upload-file-result-storage

IV. Source Code

Angular4FirebaseStorage-DeleteFile


Related Posts


Got Something To Say:

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

*