0

Hi I'm trying to download an Firebase Storage Image to the pc via Button click. I tried this but to no sucess. The Image is just opening in my browser. How can I force the pc to download the Image or is this even posible because of cross-origin ?

What I tried:

HTML:

     <button pButton pRipple type="button" (click)="downloadFile(userAttendance)" icon="pi pi-download" class="p-button-rounded"></button>

TS:

downloadFile(userAttendance: UserAttendance) {
    let link = document.createElement("a");
    link.setAttribute('type', 'hidden');
    link.download = "krankmeldung_von_" + userAttendance.user.name + ' ' + userAttendance.user.surname;
    link.href = userAttendance.attendance.ill_recipe_fp!;
    document.body.appendChild(link);
    link.click();
    link.remove();
  }

Also:

<a href="{{ userAttendance.attendance.ill_recipe_fp }}" download="Image.jpg">Download</a>

UPADTE

I used this as a guide and updated the functions

HTML:

 <button pButton pRipple type="button" (click)="downloadResource(userAttendance)" icon="pi pi-download" class="p-button-rounded"></button>

TS:

downloadFile(blobUrl: string, filename: string) {
let link = document.createElement("a");
link.download = filename;
link.href = blobUrl;
document.body.appendChild(link);
link.click();
link.remove();
 }



downloadResource(userAttendance: UserAttendance) {
    let filename: string = "krankmeldung_von_" + userAttendance.user.name + ' ' + userAttendance.user.surname;
    let url: string = userAttendance.attendance.ill_recipe_fp!;
    if (!filename) filename = url!.split('\\')!.pop()!.split('/')!.pop()!;
    fetch(url, {
        headers: new Headers({
          'Origin': location.origin
        }),
        mode: 'no-cors'
      })
      .then(response => response.blob())
      .then(blob => {
        let blobUrl = window.URL.createObjectURL(blob);
        this.downloadFile(blobUrl, filename);
      })
      .catch(e => console.error(e));
  }

and now it WORKS! but its downloading an .txt file and not an .jpg or .png.

gambella
  • 13
  • 3
  • This may help: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download – NoNameProvided Jul 28 '21 at 13:57
  • Does this answer your question? [How can I create download link in HTML?](https://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html) – NoNameProvided Jul 28 '21 at 13:59
  • I allready looked into both of your answers allready. then I am getting the url from Firebase they dont have an ending like .jpg or .png. And the Download tag in `` dosent do anything or `target="_blank"`. It just opens the image – gambella Jul 28 '21 at 14:12
  • Please take a moment and review [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Also, It’s a good idea to include code, errors and and structures as *text*, not links and images. That way, if they are needed in an answer, they can be copied and pasted. Also, if the links break, it would invalidate the question. Lastly, please include the code you've attempted so we know where you are in the process. – Jay Jul 28 '21 at 17:22

0 Answers0