Quiero obtener el enlace a la imagen cargada con .getDownloadURL() pero termino con un error:
No capturado (en promesa) TypeError: uploadTask.snapshot.ref.getDownloadURL no es una función
Si .getDownloadURL() y .ref entonces todo funciona y termino con:
Download URL Object { bytesTransferred: 120745, ... ref: {…} }Código fuente del autor:
import {upload} from './upload' import { initializeApp } from "firebase/app"; import 'firebase/storage' import { getStorage, ref, uploadBytesResumable } from "firebase/storage" // Your web app's Firebase configuration const firebaseConfig = { *code Firebase* } const app = initializeApp(firebaseConfig) const storage = getStorage(app) upload('#file', { multi: true, accept: ['.png', '.jpg', '.jpeg', '.gif'], onUpload(files, blocks) { files.forEach((file, index) => { const storageRef = ref(storage, `images/${file.name}`); const uploadTask = uploadBytesResumable(storageRef, file); uploadTask.on('state_changed', snapshot => { const percentage = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0) + '%' const block = blocks[index].querySelector('.preview-info-progress') block.textContent = percentage block.style.width = percentage }, error => { console.log(error) }, () => { uploadTask.snapshot.ref.getDownloadURL().then(url => { // << problem console.log('Download URL', url) }) }) }) } })¡Gracias!
Está mezclando la sintaxis de espacio de nombres más antigua de las versiones 8 y anteriores del SDK con la sintaxis modular más nueva de las versiones 9 y posteriores del SDK. Eso no funcionará, por lo que debe elegir una sintaxis/versión y ceñirse a ella.
La sintaxis modular para obtener la URL de descarga es:
getDownloadURL(storageRef).then(url => { console.log('Download URL', url) })Aparte de eso, normalmente encuentro el código más fácil de leer cuando uso el hecho de que la tarea de carga es una promesa en sí misma. Con eso, el código se convierte en:
files.forEach((file, index) => { const storageRef = ref(storage, `images/${file.name}`); const uploadTask = uploadBytesResumable(storageRef, file); uploadTask.on('state_changed', snapshot => { const percentage = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0) + '%' const block = blocks[index].querySelector('.preview-info-progress') block.textContent = percentage block.style.width = percentage }) uploadTask.then(() => { getDownloadURL(ref).then(url => { console.log('Download URL', url) }) }) }) Y con async / await eso se convierte en:
files.forEach((file, index) => async { const storageRef = ref(storage, `images/${file.name}`); const uploadTask = uploadBytesResumable(storageRef, file); uploadTask.on('state_changed', snapshot => { const percentage = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0) + '%' const block = blocks[index].querySelector('.preview-info-progress') block.textContent = percentage block.style.width = percentage }) await uploadTask; const url = await getDownloadURL(ref) console.log('Download URL', url) })Esta solución de la documentación oficial de Firebase ayudó.
... onUpload(files, blocks) { files.forEach((file, index) => { const storage = getStorage(); const starsRef = ref(storage, `images/${file.name}`); const uploadTask = uploadBytesResumable(starsRef, file); uploadTask.on('state_changed', snapshot => { const percentage = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0) + '%' const block = blocks[index].querySelector('.preview-info-progress') block.textContent = percentage block.style.width = percentage }, error => { console.log(error) }, () => { getDownloadURL(starsRef) .then((url) => { console.log('URL:', url); }) }) }) } })No sé si esta es la solución correcta, y mientras funciona, investigaré Firebase más a fondo.