How to know when the upload is complete using AngularFire Storage

Question

I am trying to convert and upload function using AngularFire from using the native Firebase library to the AngularFire2 v5 library. How can I know when the upload is complete so I can run additional commands after.

const image = firebase.storage().ref().child(`${user.uid}/${path}`)
    .putString(this.imageData, "base64", metadata)
    .then(() => {
        this.progressState.next(EProgressState.fadeout);
    }).catch(() => {
        this.progressState.next(EProgressState.error);
        reject();
    });

This successfully works. So far I am trying to implement

this.task = this.afStorage.ref(`${user.uid}/${path}`)
    .putString(this.imageData, "base64", metadata);

but I do not seem to be able to add a .then(() => {}) statement.

Answer 1

After reading through Github posts i found this link. According to the API Surface it should be

this.task = this.afStorage.ref(`${user.uid}/${path}`)
.putString(this.imageData, "base64", metadata);

this.task.then(res=>console.log('Success'));

But some folks have achieve it like

this.task.then().then(res => {
  console.log('Success');
});

I have no idea why to use then() two times