Quiero cargar una imagen en el almacenamiento de firebase, versión 9. Tengo un código de trabajo para firestore, pero por mi vida no puedo entender los documentos de firebase con respecto a la carga y cómo hacer que funcione para Vue (que también requiere la importación de una función REF).

mi pregunta es: ¿Cómo importo la función ref en Vue y también importo y uso la función ref de firebase firestore?

Esto es lo que tengo. Se siente mal envolver la referencia de Firebase con un valor .value, pero simplemente lo puse allí para superar el error de vue.

fragmento de código del componente vue: <-- esto funciona

 if (imageFile.value) { await uploadImage(imageFile.value); console.log("image:" + url.value); }

useStorage.js <--aquí es donde todo falla al intentar convertir de Firebase 8 a 9. ¿Es la función vue Ref?

 import { ref } from "vue"; import { projectStorage } from "../firebase/config"; import { uploadBytesResumable, getDownloadURL } from "@firebase/storage"; const useStorage = () => { const error = ref(null); const url = ref(null); const filePath = ref(null); //I need to use ref with firestore here const uploadImage = async (file) => { filePath.value = `images/${file.name}`; const storageRef = ref(projectStorage, filePath.value).value; try { const res = await storageRef.put(file); url.value = res.ref.getDownloadURL(); } catch (err) { console.log(err.message); error.value = err.message; } }; return { url, filePath, error, uploadImage }; }; export default useStorage;

config.js

 import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; import { getAuth } from "firebase/auth"; const firebaseConfig = { [info] }; // init firebase const firebaseApp = initializeApp(firebaseConfig); // init firestore service const db = getFirestore(firebaseApp); // init firestore authorization const auth = getAuth(firebaseApp); const projectStorage = getStorage(firebaseApp); export { db, projectStorage, auth };