Learn Angular2+ File Uploads to Firebase Storage

with angularfirebase

7tssivgprc2gvefz1gcj?cache=true

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);

    this.uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) =>  {
        // upload in progress
        upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
      },
      (error) => {
        // upload failed
        console.log(error)
      },
      () => {
        // upload success
        upload.url = this.uploadTask.snapshot.downloadURL
        upload.name = upload.file.name
        this.saveFileData(upload)
      }
    );
  }

Signup and Unlock for free

Grades

Nobody has graded this lesson yet.

n 0.0%
Technology Code

  • 2 Unlocks
  • 602 Total Reads
  • 12 minutes Est. Learning Time