Question 120829 in Firebase Question posted in
An extensive official documentation can be found here.

Uploading multiple files to firebase and retrieving it's URL

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";
        });
Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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);
      }
    });
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search