Firebase Storage Image upload - Function to return the Image URL after uploading it

Question

I need to implement this async function,

const uploadImage = async () => {
  const filename = new Date().getTime() + photo!.name
  const storage = getStorage(app)
  const storageRef = ref(storage, filename)
  const uploadTask = uploadBytesResumable(storageRef, photo!);
  
  uploadTask.on('state_changed',
    (snapshot) => {},
    (error) => {
      console.log("error while uploading photo", error)
    },
    async () => {
      photoUrl = await getDownloadURL(uploadTask.snapshot.ref);
      console.log("getDownloadURL", photoUrl)
      return photoUrl
    }
  );
}

It is the function to upload images to Firebase-Storage. Here I need to return the "photoUrl ". I need to call the function like,

const res = await uploadImage(photo)

how do I do this? The uploaded image's URL should return from the function.

Frank van Puffelen · Accepted Answer · 2022-05-27 22:20:32Z

5

The object returned by uploadBytesResumable is also a promise, so you can just await that and then call getDownloadURL:

const uploadImage = async () => {
  const filename = new Date().getTime() + photo!.name
  const storage = getStorage(app)
  const storageRef = ref(storage, filename)
  const uploadTask = uploadBytesResumable(storageRef, photo!);
  await uploadTask;
  photoUrl = await getDownloadURL(uploadTask.snapshot.ref);
  return photoUrl
}

You actually don't even need a reference to the task, as you already have the storageRef, the above can be shorted to:

const uploadImage = async () => {
  const filename = new Date().getTime() + photo!.name
  const storage = getStorage(app)
  const storageRef = ref(storage, filename)
  await uploadBytesResumable(storageRef, photo!);
  return await getDownloadURL(storageRef);
}

answered May 27, 2022 at 22:20

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Georgy Martynovich · Accepted Answer · 2023-02-09 14:14:00Z

1

Here is same thing to upload multiple files to firebase and return their URLs

  async function uploadMultipleFilesToFirebase(imagesArray) {
    try {
      const requests = imagesArray.map(async (imageFile) => {
        const storageRef = ref(storage, filename)
        await uploadBytesResumable(storageRef, imageFile);
        return await getDownloadURL(storageRef);
      })

      return Promise.all(requests)
    } catch (error) {
      throw({ error })
    }
  }

And then use it with:

urlsOfUploadedImages.value = await uploadProductToFirebase(productData)

edited Feb 9, 2023 at 14:14

answered Feb 8, 2023 at 14:00

Georgy Martynovich

5337 silver badges14 bronze badges

Collectives™ on Stack Overflow

Firebase Storage Image upload - Function to return the Image URL after uploading it

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related