Upload files to Firebase - AngularFire - using the URL from loaded images on the page

Question

I am working on a duplication feature for my Web App. It duplicates a table's data and the images associated to it.

I am stuck at duplicating the images from Firebase Storage using AngularFire. For the regular image upload, I use an input element and pass it to AngularFireStorage.

Here is an example:

import { AngularFireStorage } from '@angular/fire/compat/storage';

const file = $event.target.files[0];
const filePath = `${myPath}`;
const task = this.storage.upload(filePath, file);

The images that I want to duplicate are already loaded on the page as HTML <img> elements.

Do I need to use the Blog object or something that creates from a URL a uploadable format for Firebase?

I tried this but I get a CORS error

  var startFileDuplication = (_this) => {
    _this.storage
      .ref(`/tableImages/${this.userInfo.uid}/${this.activeDate}/${activeTable.key}`)
      .listAll()
      .subscribe(async (data) => {
        for (const image of data.items) {
          const path = image.fullPath;
          const url = await image.getDownloadURL();
          const fileBlob = await this.downloadFile(url);
          const file = new File([fileBlob], image.name, { type: fileBlob.type });
          const newPath = `/tableImages/${_this.userInfo.uid}/${_this.activeDate}/${newTableKey}/${image.name}`;
          _this.storage.upload(newPath, file);
        }
      })
  }
 async downloadFile(url: string): Promise<Blob> {
    const response = await fetch(url);
    return await response.blob();
  }

Access to fetch at 'https://firebasestorage.googleapis.com/*' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Answer 1

I watched this tutorial https://www.youtube.com/watch?v=tvCIEsk4Uas and updated CORS Permissions and now it works.