Uploading multiple files to firebase and retrieving it's URL

Question

i'm being able to upload the files but i don't know how i can get the URL links. I have the const fileArr which will receive each file, but i don't know how i can access it.

  const fileUpload = (name: string) => {
    let fileArr: { name: string; url: string; type: string }[] = [];
    let objectArr: any[] = [];
    Object.entries(file).forEach(([key, value]) => objectArr.push(value));

    if (file !== null) {
      const res = new Promise((resolve, reject) => {
        objectArr.forEach((item: any) => {
          const fileRef = ref(storage, `${name}/${item.name}`);

          uploadBytes(fileRef, item).then(() => {
            getDownloadURL(fileRef).then((url) => {
              fileArr.push({ name: item.name, url, type: item.type });
            });
          });
          if (!fileArr) {
            reject("error");
          } else {
            resolve(fileArr);
          }
        });
      });
      res
        .then((value) => {
          return value;
        })
        .catch((error) => {
          console.log(error);
        });
    }
  };

I'm calling this function like this

  const letsTry = () => {
    const result = fileUpload("anyname");
    console.log(result);
  };

The console just logs 'undefined'. How should i do this?

EDIT So, at the 'then catch' expression, before it returns i put a console.log. It's logging 'error', but the images are getting uploaded.

res
        .then((value) => {
          console.log(value);
          return value;
        })
        .catch((error) => {
          console.log(error);
          return "error";
        });

Answer 1

The problem is on this line:

if (!fileArr) {

Since you initialize fileArray as let fileArr: { name: string; url: string; type: string }[] = [];, it always has a value - even if it is an empty array.

And since both uploadBytes and getDownloadURL are asynchronous operations, you resolve the promise before any upload has completed.

What you'll want to do is instead check at the end of getting a download URL whether you now have all download URLs that you expect.

You can do this with Promise.all(), but you can also simply compare the number of the original files you're uploading with the number of download URLs you have, each time you got a new download URL. That should be something like this:

objectArr.forEach((item: any) => {
  const fileRef = ref(storage, `${name}/${item.name}`);

  uploadBytes(fileRef, item).then(() => {
    getDownloadURL(fileRef).then((url) => {
      fileArr.push({ name: item.name, url, type: item.type });
      if (fileArr.length === objectArr.length) {
        resolve(fileArr);
      }
    });
  });
});

Answer 2

The 4th line: Object.entries(file).forEach(([key, value]) => objectArr.push(value)); I think the varible file is undefined in line 4.