0

estoy intentando descargar una imagen almacenada en firebase storage pero lo que hace es abrirla aparte.

<a href="https://firebasestorage.googleapis.com/v0/b/raspayganaair-e.appspot.com/o/images%2FbolsaDesk.png?alt=media&token=7eff6200-6493-49c9-b33f-a76c42b0978c" download="Premio">
          <img
            alt="Descargar Premio"
            className="btn-gen"
            src={DescargarImg}
            width="100%"
          />
        </a>
3
  • Si no funciona de esa forma, podrías probar hacerlo como recomienda la documentación de Firebase: Descarga archivos en la Web el 19 may. 2021 a las 19:49
  • De casualidad tendrás un ejemplo practico de como aplicarlo dado que no me queda muy claro el proceso para la descarga. gracias el 19 may. 2021 a las 20:38
  • Ahí me fijé bien y veo que esa documentación no sirve para lo que estás buscando hacer en este caso. Pero también encontré esto: Making Firefox and Chrome download image under a specific name. Ahí se explica que no es posible generar descargas con un <a> con atributo download para imágenes externas por cuestiones de seguridad. Así que creo que lo mejor sería que busques otra solución para este problema. el 19 may. 2021 a las 21:40

1 respuesta 1

0

Tienes que habilitar el CORS para poder descargar de firebase de acuerdo a la documentación, pero debes hacerlo desde tu cuenta. Aquí ponen un ejemplo para node:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Si quieres descargar de otras fuentes que no sean firebase esta función te puede servir, esta adaptada para react de Download Images Using Javascript

  const source = "https://s0.2mdn.net/10220790/04282021-091934976-Brand_PLUS_Multi_PE_Spring_21_Evergreen_LogoTextImage_NA_Subscribe_Now_Static_728x90_NA_NA_ES.jpg"

  const linkRef = useRef() 
  
  async function downloadImage(e) {
    e.preventDefault()   
    const src = linkRef.current.href  
    const imageBlob = await (await fetch(src)).blob()       
    linkRef.current.href = URL.createObjectURL(imageBlob)        
    linkRef.current.download = 'randomImage'    
    linkRef.current.click()
  }

  const iconStyle = {
    width: 300,
    height: 50,
    objectFit: "cover"
  }

  return (
    <div> 
      <p>Haz click en la imagen para descargarla</p>
      <a  ref= {linkRef} href={source} download="download" >
        <img onClick={downloadImage} src={source} style={iconStyle}
         ></img>
      </a>
     
    </div>
  );

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.