2

I tried so many method to download image from firebase but download URL is nor working as what i expected, Its open the image in new tab.

The firebase function:

export async function addMedia(location: "initial" | "prep" | "merge" | "sribe" | "other", file: string) {

    let fileName = uuidv4();
    const storageRef = ref(storage, `/${location}/${fileName}`);

    let downloadLink = "";

    await uploadString(storageRef, file, "data_url").then(async (snapshot) => {
        await getDownloadURL(snapshot.ref).then((link: any) => {
            downloadLink = link;
        })
    })

   return downloadLink;

I'm using file-saver dependencies for my download purpose its working fine.

File download function:

const downloadImage = (url: any, name: any) => {
  console.log(url, name, "image details");
  FileSaver.saveAs(url,name);
}

The fire base URL im getting from firebase function:

https://firebasestorage.googleapis.com/v0/b/scribe-it-dev-5eed1.appspot.com/o/initial%2F1988-43ce-b927?alt=media&token=cdb01f22-7d9d-4aaf-adc8-323737fd7b1d

When i press download i get below result :

Open in new tab

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Ashen Thiwanka
  • 27
  • 5
  • [1] If you as a user are seeing the image file from the download URL anyway, why are you not able to just right click and download it manually? Also, perhaps look into [zipping the files then downloading](https://stackoverflow.com/questions/51563883/can-i-zip-files-in-firebase-storage-via-firebase-cloud-functions) - this may solve the issue of opening in browser – Joe Moore Dec 18 '22 at 17:20
  • [2] Most image URL's auto open in a view. You could solve this in html5 by adding the "download" tag, but I'm unsure of your use case so it may not apply. [Here](https://stackoverflow.com/questions/2408146/href-image-link-download-on-click)'s an article anyway. – Joe Moore Dec 18 '22 at 17:21
  • @meropis thanks for the reply. i tried the download tag but i still get the same result. – Ashen Thiwanka Dec 18 '22 at 17:52

2 Answers2

2

Stop combining await and then; use one of the other, but not both.

So:

export async function addMedia(location: "initial" | "prep" | "merge" | "sribe" | "other", file: string) {
    let fileName = uuidv4();
    const storageRef = ref(storage, `/${location}/${fileName}`);

    let downloadLink = "";

    const snapshot = await uploadString(storageRef, file, "data_url");
    const link = await getDownloadURL(snapshot.ref)

    return link;
}

Remember that you need to use await or then when calling this addMedia too, which means that you can't call it in your code that renders the UI. If you want to show the image in a component in the UI, store the download URL in the state of the component and use it from there, as shown in:

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • thanks for the reply .i tired the code u suggest and i still get the same result. its still open in new tab. in Ui its showing perfectly. – Ashen Thiwanka Dec 18 '22 at 18:05
  • The problem is not in the URL, but in how you handle the asynchronous results. Note that you didn't share how you call `addMedia` nor `downloadImage`, so I had to guess at what you did there. Did you read the links I shared about asynchronously loaded data and how to show it in a component? Does that explain why your code doesn't work? – Frank van Puffelen Dec 18 '22 at 18:23
  • I think the issue is download URL because if i download the image not saving as image its saving as a file.its not opening – Ashen Thiwanka Dec 18 '22 at 18:24
  • this the firebase funtion call `await addMedia("initial", value.base64Url).then((link) => { firebaseUrl = link; console.log(firebaseUrl, "firebase data set"); }); ` – Ashen Thiwanka Dec 18 '22 at 18:25
  • the way i download image `const downloadImage = (url: any, name: any) => { console.log(url, name, "image details"); FileSaver.saveAs(url, name); };` – Ashen Thiwanka Dec 18 '22 at 18:27
  • What Frank has said is that its to do with how you handle the asynchronous result. Read the links he's kindly supplied and it will help you. – Joe Moore Dec 19 '22 at 15:31
-1

I use base64Url to download image its working fine for me.im saving base64Url in firebase as a string

Ashen Thiwanka
  • 27
  • 5