How to retrieve download Url using getDownloadUrl() after uploading to AngularFireStorage

Question

I have already successfully uploaded images into my firebase storage, but I also want to retrieve the downloadURL and add it into my firestore database. Console logging "url" returns me the link I want. But I am having trouble using it.

I have tried this.profileImage = url but console will always return me error Cannot set property 'profileImage' of undefined. I have it defined by doing profileImage above the constructor.

I have also tried placing the entire firestore function inside but console will return cannot read property 'firestore' of undefined I am using Ionic 5.

imageRef.getDownloadURL().then((url)=> {
    this.firestore.collection('users').doc(this.user.id).update({image.url})
       console.log("this is my image" + url)
})

this is what I currently have

uploadImage(imageURI) {
    return new Promise<any>((resolve, reject) => {
      let storageRef = firebase.storage().ref();
      const imageRef = storageRef.child('image').child(this.createFileName());
      this.encodeImageUri(imageURI, function (image64) {
        imageRef.putString(image64, 'data_url')
          .then(function (snapshot) {
            console.log(snapshot)
            resolve(snapshot.downloadURL)
            imageRef.getDownloadURL().then((url)=> {
              this.profileImage = url
              console.log(this.profileImage)
              console.log("this is my image" + url)
            })
          }, err => {
            reject(err);
          })
      })
    })
  }

encodeImageUri(imageUri, callback) {
    var c = document.createElement('canvas');
    var ctx = c.getContext("2d");
    var img = new Image();
    img.onload = function () {
      var aux: any = this;
      c.width = aux.width;
      c.height = aux.height;
      ctx.drawImage(img, 0, 0);
      var dataURL = c.toDataURL("image/jpeg");
      callback(dataURL);
    };
    img.src = imageUri;
  };

Answer 1

Your first snippet looks pretty close, but you aren't saving the actual url that you get from getDownloadUrl(). If you do that and combine it into your putString() callback, you get something like this:

imageRef.putString(image64, 'data_url')
  .then((snapshot) => {
    imageRef.getDownloadURL().then((url)=> {
        this.firestore.collection('users').doc(this.user.id).update({ "imageUrl": url })
    })
  })