How to Upload Files to Firebase Storage using Angular 4

Start by watching the file upload screencast for Angular 4 and Firebase. This will provide a high level overview of what is required to get your app up and running. 

We will handle uploads in the service layer, which will allow us to bootstrap these functions into any component.  You can generate a service by running: 

ng g service uploads/shared/service

We will also need the Firebase API in the service. Here's how to import the API into the app. 

 import * as firebase from 'firebase'; 

The upload task will handle the bulk of uploading logic. It works by using creating a promise to put the file in storage. You can then monitor the progress of this promise to retrieve a snapshot of the bytes transferred. The function will also catch the error/success state of the promise. 

@Injectable()
export class UploadService {
  constructor(private af: AngularFire, private db: AngularFireDatabase) { }

  private basePath:string = '/uploads';
  private uploadTask: firebase.storage.UploadTask;
  uploads: FirebaseListObservable;

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

  // Writes the file details to the realtime db
  private saveFileData(upload: Upload) {
    this.db.list(`${this.basePath}/`).push(upload);
  }