Learn Angular2+ File Uploads to Firebase Storage

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. 

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