Angular 4 Firebase – Upload File to Storage

Firebase Cloud Storage helps us upload and share rich content data. Data is stored in a Google Cloud Storage bucket. With Firebase, we can perform robust operations (download/upload) regardless of network quality with strong security (Cloud Storage integrates with Firebase Authentication) and high scalability.

In this tutorial, we’re gonna look at way to upload File to Firebase Storage.

Related Post:
How to integrate Firebase with Angular 4

More Practice:
Angular 4 Firebase – Get List Files from Storage
Angular 4 Firebase – Delete File from Storage
Angular 4 Firebase – Upload Image & Display List Images 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

– define FileUpload class (name, url, file)
– create a reference to the full path of the file, including the file name
– upload data using put(file) method for local file

FileUpload class

Upload File Service

– create a reference to the full path of the file, including the file name
– upload data using put(file) method for local file
– monitor the Upload event using uploadTask.on() function.

– save metadata using Firebase Realtime Database:

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

angular-4-firebase-storage-upload-file-overview

1.2 Structure

angular-4-firebase-storage-upload-file-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 App Component

app.component.ts

app.component.html

2.8 Check Result

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

angular-4-firebase-storage-upload-file-overview

Finish:
angular-4-firebase-storage-upload-file-result-app

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

Firebase Database:
angular-4-firebase-storage-upload-file-result-database

IV. Source Code

Angular4FirebaseStorage


Related Posts


Got Something To Say:

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

*