Vuefire Storage doesn't wait for image upload to complete

Question

I'm trying to get Vuefire Storage to wait for a file to finish uploading so that I can get the image URL and update Auth and the Firestore. The upload() method is supposed to return a promise, but it doesn't seem to wait for it to resolve before executing the code in .then()

const submit = async () => {
    const storage = useFirebaseStorage()
    const avatarFileRef = storageRef(storage, fileName.value)
    const { url, upload, uploadProgress } = useStorageFile(avatarFileRef)
    await upload(file.value[0])!
      .then(() => {
        if (uploadProgress.value == 1) {
          console.log(url.value)
          updateAuth(url.value!)
        }
      })
      .catch((error) => {
        console.log(error)
        // file save error message
      })
  }

console.log(url.value) is returning null.

Answer 1

I think it is related to the issue i had. I raised it to Eduardo, maintainer of vuefire. Currently there is no way around it. You can see the thread here. It will probably be fixed in the next version.