Hi I am trying to get the url of an image after uploading to Firebase storage. In the commented code below I show a few things I have tried. I have successfully uploaded an image to Firebase Storage.

async uploadAvatar({ state }, { authId, file, filename }) {
      if (!file) return null
      authId = authId || state.authId
      filename = filename || file.name
      try {
        const storage = getStorage()
        const storageRef = ref(
          storage,
          `uploads/${authId}/images/${Date.now()}-${filename}`
        )
        // This is 1st way I tried
        // This sucessfully uploads image to storage
        // uploadBytes(storageRef, file)
        // // const snapshot = await uploadBytes(storageRef, file)
        // This throws a not found error
        // const url = await getDownloadURL(storageRef)
        // console.log('URL', url)
        // return url

        // // This sucessfully uploads image to storage
        uploadBytes(storageRef, file).then((snapshot) => {
          console.log('Uploaded avatar!')
          const avatarUrl = getDownloadURL(storageRef)
            .then((url) => {
              // This is correct url
              console.log('URL', url)
              return url
            })
            .catch((err) => {
              console.log('Error with file url', err)
            })
          // This logs promise pending with correct url inside
          console.log('avatarUrl', avatarUrl)
          return avatarUrl
        })
      } catch (error) {
        const { addNotification } = useNotifications()
        addNotification({
          message: 'Error uploading avatar image',
          type: 'error'
        })
      }
    }

CodePudding user response：

You're not returning anything from the top-level code in your uploadAvatar function yet.

async uploadAvatar({ state }, { authId, file, filename }) {
  if (!file) return null
  authId = authId || state.authId
  filename = filename || file.name
  try {
    const storage = getStorage()
    const storageRef = ref(
      storage,
      `uploads/${authId}/images/${Date.now()}-${filename}`
    )

    //