Learn Angular2+ File Uploads to Firebase Storage

with angularfirebase


Angular2 File Uploads Video Tutorial

How to Push Files to Firebase via an Angular2 Frontend

You will need to interact directly with the Firebase API to upload files to firebase. Let's do this by creating a service

ng g service uploads/shared/service

Start by adding the firebase API to the service, then use the function below to handle the upload process. 

For more details, checkout our full Firebase file upload tutorial and screencast

TypeScript Upload Function for Firebase

  pushUpload(upload: Upload) {
    let storageRef = firebase.storage().ref();
    this.uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

      (snapshot) =>  {
        // upload in progress
        upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
      (error) => {
        // upload failed
      () => {
        // upload success
        upload.url = this.uploadTask.snapshot.downloadURL
        upload.name = upload.file.name

Signup and Unlock for free


Nobody has graded this lesson yet.

n 0.0%
Technology Code

  • 6 Unlocks
  • 2644 Total Reads
  • 12 minutes Est. Learning Time