Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire
angular8
4
firebase
39
storage
6
uploadfile
2
Male avatar

loveprogramming viết ngày 14/05/2021

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 @angular/fire. Files' info will be stored in Firebase Realtime Database.

Related Posts:

Want to know to to deploy Angular App on Hostings?

Please visit this Series (with Instructional Videos)

Angular 8 App with Firebase Storage

Technologies

  • Angular 8
  • RxJs 6 – @angular/fire 5.1.3 – firebase 5.11.1

    Angular 8 App Overview

    angular-8-upload-files-firebase-storage-demo

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: Upload File to Storage)
– get list Files and display

How to do

angular-8-upload-files-firebase-storage-overview

  • Upload file:
  • save file to Firebase Cloud Storage
  • retrieve {name, url} of the file from Firebase Cloud Storage
  • save {name, url} to Firebase Realtime Database

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

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

-> Firebase Storage:

angular-8-firebase-storage-results

-> Firebase Realtime Database:

angular-8-firebase-storage-database-results

Integrate Firebase into Angular 8 App

Please visit this post to know step by step.

Define Model Class

We define FileUpload class with fields: key, name, url, file:

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 7 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 7 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/android/firebasestoragegetlistfilesdisplayimagefirebaseuidatabaseandroid Firebase Storage – Get List of Files example – Image...
loveprogramming viết 3 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!