Download image from firebase react Js-CodePudding

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/1988-43ce-b927?alt=media&token=cdb01f22-7d9d-4aaf-adc8-323737fd7b1d

When i press download i get below result :

Open in new tab

CodePudding user response：

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:

CodePudding user response：

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