Angular Firebase Storage: wait for photo upload to return downloadURL

Question

I've tried everything and I feel like I'm about to lose my mind. I'm uploading signature photo as base64 to Firebase Storage using putString and I'm getting downloadURL as a return. The problem is that sometimes it returns blank string, because uploading isn't finished, and the method goes on. So when I try to invoke this method via button I have to click it 2 times or just wait couple seconds to do so.

async saveCanvas() {
const loading = await this.loadingController.create();
await loading.present();
var signature = this.signaturePad.toDataURL().slice(22);
this.signaturePhotoName = new Date().toJSON();
const fileStoragePath = `signatures/${this.signaturePhotoName}`;
const imageFireStorageReference = this.angularFireStorage.ref(fileStoragePath);
this.fireUploadTask = this.angularFireStorage.ref(fileStoragePath).putString(signature, 'base64', { contentType: 'image/png'});
this.fireUploadTask.snapshotChanges().pipe(
  finalize(() => {
    const downloadURL = imageFireStorageReference.getDownloadURL();
    downloadURL.subscribe(async url => {
      if(url) {
        this.uploadedSignaturePhotoPath = url;
        this.report.signature = this.uploadedSignaturePhotoPath;
        this.reportForm.get('_signature').setValue(this.uploadedSignaturePhotoPath);
        await loading.dismiss();
      }
    })
  })
).subscribe();}

async onSubmit() {
    if(!this.isCanvasBlank()) {
      this.saveCanvas().then(() => {
        if(this.report.signature != '') {
          if(this.reportForm.valid) {
            this.reportsService.postReport(this.report).subscribe(response => {
              console.log(response);
            })}
          else {
            console.log("need more info");
          }
        }
      });
    } else {
      alert("no signature!");
    }
  }

Answer 1

Await for upload to finish with putString , then go to query the download url getDownloadURL() .

this.fireUploadTask = await this.angularFireStorage.ref(fileStoragePath)
     .putString(signature, 'base64', { contentType: 'image/png'});