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.

Hmm... as far as I can see [`putString`](https://github.com/angular/angularfire2/blob/master/src/storage/ref.ts#L13) returns an `AngularFireUploadTask`, which has a [`then`](https://github.com/angular/angularfire2/blob/master/src/storage/task.ts#L15). I'm not sure why you don't get that. What error do you get when you add a `then()`? — Frank van Puffelen, Mar 25 '18 at 14:15
`this.afStorage.ref(`${user.uid}/${path}`).putString(this.imageData, "base64", metadata).then(() => {}).catch(() => {});` I get a problem in the `.then`. The error is `Expected 0 arguments, but got 1` — Xerri, Mar 25 '18 at 14:19
Try `this.task.snapshotChanges().subscribe(res=>console.log(res))` and you can see all meta data available. Possibly there will be `state` of your upload. i didn't try myself and official doc didn't mentioned it. — Hareesh, Mar 25 '18 at 14:24
I still need the promise to work as I have `.then` functions throughout the application. — Xerri, Mar 25 '18 at 14:39

score 2 · Accepted Answer · answered Mar 25 '18 at 17:22

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

How to know when the upload is complete using AngularFire Storage

1 Answers1