how to upload list of images to firebase storage and get all the urls

Question

I am using firebase storage to upload the images and then store the urls to firebase db. I am using that to upload the list of images but the code below works fine in firebase v8 but not in version 9

export const multiImageUpload = async (path = "Products", imageFileList) => {
  let imagesUrlArray = [];
  let imageUrl = "";
  // array of files
  let arr = imageFileList.map((item) => {
    return item.originFileObj;
  });

  for (let i = 0; i < arr.length; i++) {
    const upload = await storage.ref(`/${path}/${arr[i].name}`).put(arr[i]);
    imageUrl = await upload.ref.getDownloadURL();
    imagesUrlArray.push(imageUrl);
  }

  return imagesUrlArray; // array of URLS of uploaded files
};

it throws error that ref.put is not a function please guide me why I am getting that error.

Answer 1

import { ref, getDownloadURL, uploadBytesResumable, uploadBytes } from 'firebase/storage';

// Upload the multiple images
        const multiImage = async (imageFileList) => {
            /* eslint no-var: 0 */
            const imagesUrlArray = [];
            /* eslint no-var: 0 */
            for (let i = 0; i < imageFileList.length; i++) {
                const id = uuidv4();
                const metadata = {
                    contentType: 'image/jpeg'
                };
                /* eslint-disable no-await-in-loop */
                const storageRef = ref(storage, `images/${id}`);
                const upload = await uploadBytes(storageRef, imageFileList[i], metadata);
                const imageUrl = await getDownloadURL(storageRef);
                imagesUrlArray.push(imageUrl);
            }
            return imagesUrlArray; // array of URLS of uploaded files
        };