Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire
Tags: angular8, firebase, storage, uploadfile
Published: 2021-05-14 14:37:34

https://grokonez.com/frontend/angular/angular-8/upload-display-delete-files-angular-8-firebase-storage-angular-fire

Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

In this tutorial, grokonez.com shows you way to upload, get, delete Files to/from Firebase Storage in a simple Angular 8 App using <code>@angular/fire</code>. Files' info will be stored in Firebase Realtime Database.

Related Posts:
- <a href="https://grokonez.com/firebase/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire">Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire</a>
- <a href="https://grokonez.com/frontend/angular/angular-8-firebase-tutorial-crud-operations-angular-fire-example">Angular 8 Firebase CRUD operations with @angular/fire</a>
- <a href="https://grokonez.com/frontend/angular/angular-8-firestore-tutorial-crud-examples-angularfire">Angular 8 Firestore tutorial with CRUD application example – @angular/fire</a>

Want to know to to deploy Angular App on Hostings?
>> Please visit this <a href="https://grokonez.com/angular-tutorial#Deployment">Series</a> (with Instructional Videos)

<!--more-->
<h2>Angular 8 App with Firebase Storage</h2>
<h3>Technologies</h3>
- Angular 8
- RxJs 6
– @angular/fire 5.1.3
– firebase 5.11.1
<h3>Angular 8 App Overview</h3>
<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-upload-files-firebase-storage-demo.png" alt="angular-8-upload-files-firebase-storage-demo" width="425" height="392" class="alignnone size-full wp-image-17869" />

We will build an Angular 8 Firebase App that can:
– helps user choose file from local and upload it to Firebase Storage
– show progress with percentage
– save file metadata to Firebase Realtime Database
(Functions above from the posts: <a href="https://grokonez.com/frontend/angular/angular-4-firebase-upload-file-to-storage">Upload File to Storage</a>)
– get list Files and display
<h2>How to do</h2>
<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-upload-files-firebase-storage-overview.png" alt="angular-8-upload-files-firebase-storage-overview" width="629" height="324" class="alignnone size-full wp-image-17870" />

- Upload file:
+ save file to Firebase Cloud Storage
+ retrieve <code>{name, url}</code> of the file from Firebase Cloud Storage
+ save <code>{name, url}</code> to Firebase Realtime Database

- Get/delete files: use file <code>{name, url}</code> stored in Database as reference to Firebase Cloud Storage.

So, after upload process, the results will be like:

-> Firebase Storage:

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-firebase-storage-results.png" alt="angular-8-firebase-storage-results" width="599" height="398" class="alignnone size-full wp-image-17877" />

-> Firebase Realtime Database:

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-firebase-storage-database-results.png" alt="angular-8-firebase-storage-database-results" width="602" height="483" class="alignnone size-full wp-image-17878" />
<h3>Integrate Firebase into Angular 8 App</h3>
Please visit <a href="https://grokonez.com/firebase/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire">this post</a> to know step by step.
<h3>Define Model Class</h3>
We define <code>FileUpload</code> class with fields: <code>key</code>, <code>name</code>, <code>url</code>, <code>file</code>:

More at:

https://grokonez.com/frontend/angular/angular-8/upload-display-delete-files-angular-8-firebase-storage-angular-fire

Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire