Question 119393 in Firebase Question posted in
An extensive official documentation can be found here.

Download image from firebase react Js

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search