Why I can't create a JavaScript File Object starting from the Firebase Storage URL?

Question

Hi to everyone I am not so into Angular and JavaScript and I have the following problem.

Into an Angular component I am iterating on an array of objects. Each object contains an url property representing an image on Firebase Storage service.

Starting from this URL I wanto to retrieve the image and create a brand new JavaScript File object.

I am trying to do in this way:

  createFilesList(attachments: any[]) {
    console.log("createFilesList() START, attachments", attachments);

    const attachmentsFiles = attachments.map(element => {
      console.log("CURRENT IMAGE URL: ", element.url);

      const urlToObject= async()=> {
        console.log("BEFORE FATCH");
        const response = await fetch(element.url);
        // here image is url/location of image
        const blob = await response.blob();
        const file = new File([blob], 'image.jpg', {type: blob.type});
        console.log("FILE: ", file);
      }

    });

    console.log("attachmentsFiles: ", attachmentsFiles);
  }

But it is not working as I am expeting. Bascailly it enter into the map() arrow function defined to iterate on the original attachements array. It correctly print the URL of the current image so in the console I correctly obtain the URL of the image on firebase.

Then I was trying to follow this example in order to generate a file starting from my image URL: image url to file() object using js

So I am trying to define a new urlToObject object calling an async() function. The problem is that it never enter into the async function body so this lines of code (and all the following lines of this function) is never execcuted:

console.log("BEFORE FATCH");

What is wrong in my code? What am I missing? How can I try to fix it?

Answer 1

You are creatint a function urlToObject but you aren't calling it. You don't even need the function. You can execute the code. But the code contains asynchronous function calls. That means that map will create promises and you have to wait:

createFilesList(attachments: any[]) {
  console.log("createFilesList() START, attachments", attachments);

  Promise.all(attachments.map(async element => {
    console.log("CURRENT IMAGE URL: ", element.url);

    console.log("BEFORE FATCH");
    const response = await fetch(element.url);
    // here image is url/location of image
    const blob = await response.blob();
    const file = new File([blob], 'image.jpg', {type: blob.type});
    console.log("FILE: ", file);
    return file;
  })).then(attachmentsFiles => {
    console.log("attachmentsFiles: ", attachmentsFiles);
  });
}

Alternatively you can make createFilesList async and await all responses:

async createFilesList(attachments: any[]) {
    console.log("createFilesList() START, attachments", attachments);

    const attachmentsFiles = await Promise.all(attachments.map(async element => {
        console.log("CURRENT IMAGE URL: ", element.url);

        console.log("BEFORE FATCH");
        const response = await fetch(element.url);
        // here image is url/location of image
        const blob = await response.blob();
        const file = new File([blob], 'image.jpg', { type: blob.type });
        console.log("FILE: ", file);
        return file;
    }));

    console.log("attachmentsFiles: ", attachmentsFiles);
}