[Vuejs]-How to make this Vue Composable for Firebase Storage awaitable?

by

0👍

The first problem is caused by the fact that uploadImage() does not actually await anything at the "top level" of the function. While the function does call uploadBytesResumable(), passing async/await arguments, the result of the call itself (an UploadTask) is not await-ed, which leads to the problem you observed.

To make uploadImage() pause for the upload, you can either 1️⃣ await the UploadTask result, or 2️⃣ return the UploadTask itself:

const uploadImage = async (file: File) => {
  if (user.value) {
    ⋮
    try {
      const uploadTask = uploadBytesResumable(storageReference, file)
      uploadTask.on(⋯)

      await uploadTask 1️⃣
      // or...
      return uploadTask 2️⃣
    }
  }
}

The difference is the latter allows the caller access to the Firebase snapshot data:

const snapshot = await uploadImage()

Leave a comment