How can return an Observable from this method only when a file is completely uploaded into Firebase Storage?

Question

I am having some difficulties trying to upload a file on Firebase Storage from my Angular application.

I have the following situation: in a service class I have something like this:

if(file != null) {
    this.uploadFileIntoFirebaseStore(file)
        .subscribe(url => {
                              console.log("RETRIEVING URL")
                              console.log(url);
                              console.log("END RETRIEVING URL");
                              ...................................
                              ...................................
                              OTHER OPERATIONS
                              ...................................
                              ...................................
                           });
}

As you can see in the previous code snippet I am calling a method called uploadFileIntoFirebaseStore() passing a file to it and I am subscribing the returned observable. This method have to upload a file to Firebase Storage and I think that its implementation it is not completely correct.

This is the code of my uploadFileIntoFirebaseStore() method:

uploadFileIntoFirebaseStore(fileToBeUploaded) {
    var n = Date.now();
    const filePath = `user_avatar/${n}`;
    const fileRef = this.storage.ref(filePath);

    return this.storage.upload(`user_avatar/${n}`, fileToBeUploaded)
             .snapshotChanges()
             .pipe(
                switchMap(refStatus => {
                  console.log("refStatus: ", refStatus);

                  if(refStatus.state == "running")
                    console.log("UPLOAD RUNNING");
                  else {
                    console.log("UPLOAD COMPLETED");
                    console.log("fileRef.getDownloadURL() OUTPUT: ", fileRef.getDownloadURL());
                    //return fileRef.getDownloadURL();
                  }

                  console.log("fileRef.getDownloadURL() OUTPUT: ", fileRef.getDownloadURL());
                  return fileRef.getDownloadURL();
                })
             );
}

The problem is the following: this method correctly upload my file into Firebase Storage. It first enter into the

if (refStatus.state == "running")

indicating that the upload process is still not complete. At this point it return fileRef.getDownloadURL(); observable but it (at this time) refers to a file not yet fully uploaded (therefore does not yet exist a URL).

So the subscription of my uploadFileIntoFirebaseStore() method tries to use this observable to retrieve and print the url (that have to be printed by console.log(url);) and I get an error.

Then the upload process continues until when it enter into the else statement that print the URL of the uploaded file. But at this point my application is broken because it seems that in the uploadFileIntoFirebaseStore() subscription I yet received a value that doesn't contain the URL.

I really have no idea how to solve this issue. My idea is that the uploadFileIntoFirebaseStore() method have to emit a value only when the file is completely uploaded and an URL for this file exist.

How can I solve this issue?

Answer 1

Sounds like you can ignore the 'running' state in your final emission. I would try something like this:

uploadFileIntoFirebaseStore(fileToBeUploaded) {
  var n = Date.now();
  const filePath = `user_avatar/${n}`;
  const fileRef = this.storage.ref(filePath);

  return this.storage.upload(filePath, fileToBeUploaded)
    .snapshotChanges()
    .pipe(
      tap(refStatus => {
        if(refStatus.state == "running"){
          console.log("UPLOAD RUNNING");
        }
      }),
      filter(refStatus => refStatus.state != "running"),
      switchMap(_ => fileRef.getDownloadURL())
    );
}

Answer 2

I think you need the filter operator. It will only continue if your condition passed.

...
.pipe(
    filter(refStatus => refStatus.state != "running"),
    switchMap(refStatus => {
        ...