es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Creando una referencia de almacenamiento para cargar una imagen a Google Firebase.

01 Aug, 2023 Programación

Actualmente estoy trabajando en un proyecto antiguo que utiliza una versión desactualizada de Firebase y lo estoy migrando a la nueva versión modular. Después de seguir la documentación en el sitio web de Firebase, he logrado hacer la mayor parte del trabajo, excepto por la siguiente funcionalidad de mi proyecto: permitir que un usuario registrado pueda cargar una foto.

Todo está funcionando excepto mi función handleUpload que se ve así:

const handleUpload = () => {
const uploadTask = storage.ref(‘images/${image.name}’).put(image);
uploadTask.on(
“state_changed”,
(snapshot) => {
//Función de progreso… (muestra la barra de carga)
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
(error) => {
//Función de error…
console.log(error);
alert(error.message);
},
() => {
//Función de completado
storage.ref(“images”).child(image.name).getDownloadURL()
.then(url => {
db.collection(“posts”).add({
timestamp: serverTimestamp,
caption: caption,
imageUrl: url,
username: username
});
setProgress(0);
setCaption(“”);
setImage(null);
})

    }
)

}

No puedo hacer que esta parte funcione porque tengo un problema al cambiar la antigua sintaxis de Firebase por la nueva versión modular. He intentado seguir la documentación en línea haciendo algo como const storageRef = ref(storage, ‘some-child’); pero el resto sigue sin funcionar.

¿Alguna idea de cómo solucionar esto o cómo debería verse la función con la nueva sintaxis?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para migrar la función handleUpload a la nueva sintaxis modular de Firebase, deberá hacer algunos cambios en el código existente.

    Primero, deberá importar los módulos necesarios del SDK de Firebase:

    import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { collection, addDoc, serverTimestamp } from "firebase/firestore";

    Luego, puede actualizar la función handleUpload para usar la nueva sintaxis:

    const storage = getStorage();
const storageRef = ref(storage, `images/${image.name}`);
const uploadTask = uploadBytesResumable(storageRef, image);
uploadTask.on(
  "state_changed",
  (snapshot) => {
    const progress = Math.round(
      (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    );
    setProgress(progress);
  },
  (error) => {
    console.log(error);
    alert(error.message);
  },
  () => {
    getDownloadURL(storageRef).then((url) => {
      addDoc(collection(db, "posts"), {
        timestamp: serverTimestamp(),
        caption: caption,
        imageUrl: url,
        username: username,
      });
      setProgress(0);
      setCaption("");
      setImage(null);
    });
  }
);

    En la nueva sintaxis, primero inicializa el módulo de almacenamiento y obtén una referencia a la ubicación de almacenamiento deseada usando ref(). Luego, crea una tarea uploadBytesResumable con la referencia y el archivo de imagen. También puedes agregar los listeners de eventos como antes.

    Finalmente, en el listener completed, puedes obtener la URL de descarga del archivo cargado usando getDownloadURL(). Luego, puedes agregar un nuevo documento a la colección “posts” usando addDoc() y la función collection() (del SDK modular Firestore de Firebase) y configurar la URL y otros datos relevantes. Por último, puedes restablecer las variables de estado de progreso, leyenda e imagen.

    Nota: Asegúrese de importar los módulos necesarios y reemplazar todas las referencias a la antigua API de Firebase con la nueva sintaxis modular en todo su código.

Comments are closed.