Download file from firebase storage using a tag

Question

I am trying to download the file onclick from the following URL:

https://firebasestorage.googleapis.com/v1/b/brand-250.appspot.com/o/downloadLinks%2FIMG_4584.jpeg?alt=media&token=98634702-5f21-4b9f-bfcb-71566e4526cd

However, when I click the a tag, the page opens up and the file doesn't download. Any idea why the file is automatically downloading?

<a
    className="link__button"
    style={buttonStyle}
    href="https://firebasestorage.googleapis.com/v1/b/brand-250.appspot.com/o/downloadLinks%2FIMG_4584.jpeg?alt=media&token=98634702-5f21-4b9f-bfcb-71566e4526cd"
    target="_blank"
    download
  >
    <div className="link__infoContainer">
      <div className="link__left"></div>
      <div className="link__middle">{downloadTitle}</div>
      <div className="link__right"></div>
    </div>
  </a>

Misgiving

Fist of all what page opens up? the firebase link should be a download link. Please share a screenshot of the result. – Juror

Answer 1

In a tag, when you want to download the file using a tag, the href must be a relative path.

In your case, just add / in start of your path.

<a
  className="link__button"
  style={buttonStyle}
  href=`/${https://firebasestorage.googleapis.com/v1/b/brand-250.appspot.com/o/downloadLinks%2FIMG_4584.jpeg?alt=media&token=98634702-5f21-4b9f-bfcb-71566e4526cd}`
  target="_blank"
  download
>
  <div className="link__infoContainer">
    <div className="link__left"></div>
    <div className="link__middle">{downloadTitle}</div>
    <div className="link__right"></div>
  </div>
</a>

Inn