How to get the url of a file uploaded to firebase?

Question

firebase

Now I'm watching a course on integrating Vue JS with firebase, where the author displays data from firebase to the frontend. But using his code I get an error. I can't get the address of the file uploaded to the firebase repository so that I can display it in the src of the image.
The code the author uses:

import * as fb from 'firebase' // подключение библиотеки API firebase

class Ad {
  constructor (title, description, ownerId, imageSrc = '', promo = false, id = null) {
    this.title = title
    this.description = description
    this.ownerId = ownerId
    this.imageSrc = imageSrc
    this.promo = promo
    this.id = id
  }
}

export default {
  state: {
    ads: []
  },
  mutations: {
    createAd (state, payload) {
      state.ads.push(payload)
    },
    loadAds (state, payload) {
      state.ads = payload
    }
  },
  actions: {
    async createAd ({commit, getters}, payload) {
      commit('clearError')
      commit('setLoading', true)

      const image = payload.image

      try {
        const newAd = new Ad(
          payload.title,
          payload.description,
          getters.user.id,
          '',
          payload.promo
        )

        const ad = await fb.database().ref('ads').push(newAd)
        const imageExt = image.name.slice(image.name.lastIndexOf('.'))

        const fileData = await fb.storage().ref(`ads/${ad.key}.${imageExt}`).put(image)
        const imageSrc = fileData.metadata.downloadURLs[0]

        await fb.database().ref('ads').child(ad.key).update({
          imageSrc
        })

        commit('setLoading', false)
        commit('createAd', {
          ...newAd,
          id: ad.key,
          imageSrc
        })
      } catch (error) {
        commit('setError', error.message)
        commit('setLoading', false)
        throw error
      }
    },
    async fetchAds ({commit}) {
      commit('clearError')
      commit('setLoading', true)

      const resultAds = []

      try {
        const fbVal = await fb.database().ref('ads').once('value')
        const ads = fbVal.val()

        Object.keys(ads).forEach(key => {
          const ad = ads[key]
          resultAds.push(
            new Ad(ad.title, ad.description, ad.ownerId, ad.imageSrc, ad.promo, key)
          )
        })

        commit('loadAds', resultAds)
        commit('setLoading', false)
      } catch (error) {
        commit('setError', error.message)
        commit('setLoading', false)
        throw error
      }
    }
  },
  getters: {
    // ...
  }
}

${ad.key}.${imageExt} - here is a string with the name of the uploaded file and its extension.
getDownloadURLs - a property through which the author receives the addresses of downloaded images.
The firebase library works, when loaded from the front, the pictures get into the storage.
I can get information from the downloaded image, but the metadata property doesn't have downloadURLs!

Perhaps the fact is that the author uses an old version of firebase and now, instead of getDownloadURLs, another field or method is used to display information on downloaded files?

Answer 1

// const imageSrc = fileData.metadata.downloadURLs[0]
const imageSrc = await fb.storage().ref().child(fileData.ref.fullPath).getDownloadURL()
This worked for me.

Answer 2

Alexander, greetings!
Were you able to resolve this issue? I am also taking this course on Vue, I have a problem when creating a declaration in the application, the error is "Uncaught (in promise) TypeError: Cannot call a class as a function".

Answer 3

this code works and fb is imported a little differently
import fb from 'firebase/app';
import 'firebase/database';
import 'firebase/storage';