0
201
Vistas¿Cómo puedo crear un nodo que almacene referencias a una lista de imágenes cargadas?
actualización: he agregado el archivo completo
He subido una imagen al almacenamiento de Firebase, luego quiero enviar la URL a la base de datos en tiempo real de Firebase en un nodo para un usuario en particular.
Estoy usando este código para probarlo, pero aparece un error que dice
Cannot read properties of undefined (reading 'path') 
aquí está el bloque de código que estoy usando
El error apunta a esta línea `set(ref(db,'users/'+auth.currentUser.uid+'/images/'+url))
import { getAuth } from "firebase/auth"; import React, { useState } from "react"; import { db } from "./util/firebase"; import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage"; import {storage} from './util/firebase' import { set } from "firebase/database"; import {v4 as uuidv4} from 'uuid' function AddPicture() { //const [image, setImage] = useState(""); const auth = getAuth(); const user = auth.currentUser; const metadata = { customMetadata:{ 'imageID': uuidv4(), 'User': auth.currentUser.email, } } const uploadPicture = (e) => { e.preventDefault(); const image = e.target[0].files[0]; const imageRef = ref(storage,'/images/'+user.uid+'/'+image.name) const uploadTask = uploadBytesResumable(imageRef, image,metadata); if (image) { uploadTask.on("state_changed", (snapshot) => { console.log("Uploaded image"); console.log('current uid'+auth.currentUser.uid) }, (error) => console.log('didnt upload '+error), ()=>{ getDownloadURL(uploadTask.snapshot.ref) .then((url)=>{ set(ref(db,'users/'+auth.currentUser.uid+'/images/'),url); console.log(url) }) } ) } else { console.log('Please Choose an image'); alert('image type not supported'); return; } }; return ( <div className="container"> <form onSubmit={uploadPicture}> <input type="file" /> <button >Upload</button> </form> </div> ); } export default AddPicture;2 Respuestas
Responde la pregunta0
Como se detalla en el documento , debe pasar dos parámetros al método set() :
-
ref: La ubicación para escribir; -
value: el valor que se va a escribir (cadena, número, booleano, objeto, matriz o nulo).
En su caso, solo pasa un parámetro, el ref .
Debe pasar el valor que se va a escribir (es decir, la url), como se muestra a continuación:
set(ref(db,'users/'+auth.currentUser.uid+'/images/'), {url: url}))o
set(ref(db,'users/'+auth.currentUser.uid+'/images/'), url))En el título de su pregunta, menciona "una lista de imágenes cargadas".
Sin más detalles sobre cómo obtiene esta lista, es difícil dar una respuesta precisa, pero puede guardar una serie de direcciones URL como
set(ref(db,'users/'+auth.currentUser.uid+'/images/'), [url1, url2]))o agregue algunos subnodos adicionales como:
set(ref(db,'users/'+auth.currentUser.uid+'/images/0'), url1)) set(ref(db,'users/'+auth.currentUser.uid+'/images/1'), url2)) Nota adicional: también debe verificar que auth.currentUser.uid tenga el valor correcto, es decir, que llame a este método solo cuando el usuario haya iniciado sesión por completo .
0
Después de dormir un poco, me di cuenta de mi error. Estaba usando la ref de 'firebase/storage' para publicar en mi base de datos en tiempo real, que tiene una ref diferente que se encuentra en 'firebase/database' .
import {ref as dbRef} from 'firebase/database'; Usé un alias dbref porque hay otra ref en mi archivo.
Una vez que hice los cambios, el código original funciona sin errores.