Firebase not returning downloadURL in metaData with typescript and Ionic3

Question

I have been struggling for days now to get Firebase to return the downloadURL in the metadata. By all accounts it should be there as the metadata includes fullPath and other info, but just not downloadURL.

  addItem(
itemName: string,
eventId: string,
itemPicture: string = null
): PromiseLike<any> {
    return this.activityListRef
      .child(`${eventId}/itemList`)
      .push({ itemName })
      .then(newItem => {
        this.activityListRef.child(eventId).transaction(event => {
          return event;
        });
        if (itemPicture != null) {
          return firebase
            .storage()
            .ref(`/item/${newItem.key}/profilePicture.png`)
            .putString(itemPicture, 'base64', { contentType: 'image/png' })
            .then(savedPicture => {
            console.log(savedPicture.metadata);
              this.activityListRef
                .child(`${eventId}/itemList/${newItem.key}/profilePicture`)
                .set(savedPicture.downloadURL);
            });
        }
      });
  }

if I log that in the console, I can see everything except downloadURL

I also tried changing .set(savedPicture.downloadURL); to .set(savedPicture.metadata.downloadURLS[0]);

but still there are no downloadURL items in any of the response parameters.

Any ideas?

Answer 1

after you upload a raw string using the putString method, use the same ref and use getDownloadUrl() method to get the url like below,

storage()
        .ref(`/item/${newItem.key}/profilePicture.png`).getDownloadUrl() // which returns promise in turn returns the image url once it's available.

In your case, you can do like below

var storageRef = firebase.storage().ref(`/item/${newItem.key}/profilePicture.png`)

return storageRef.putString(itemPicture, 'base64', { contentType: 'image/png' })
        .then(savedPicture => {
              storageRef.getDownloadUrl()
                .then(url =>{
                  this.activityListRef
                 .child(`${eventId}/itemList/${newItem.key}/profilePicture`)
                 .set(url);
         });             
 });

Hope this helps