Estoy tratando de crear un Vue Composable que cargue un archivo en Firebase Storage.
Para hacer esto estoy usando la versión modular de Firebase 9.
Pero mi código actual no carga nada y, en su lugar, devuelve este error: FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Dado que este error ya proviene de mi console.log("ERROR", err); No estoy seguro de dónde más buscar una solución.
Mi código se implementa usando TypeScript, en caso de que eso importe.
import { projectStorage } from "@/firebase/config"; import { ref, watchEffect } from "vue"; import { ref as storageRef, uploadBytesResumable, UploadTaskSnapshot, UploadTask, getDownloadURL, StorageError, } from "firebase/storage"; const useStorage: any = (file: File) => { const error = ref<StorageError | null>(null); const url = ref<string | null>(null); const progress = ref<number | null>(null); watchEffect(() => { // references const storageReference = storageRef(projectStorage, "images/" + file.name); // upload file const uploadTask: UploadTask = uploadBytesResumable(storageReference, file); // update progess bar as file uploads uploadTask.on( "state_changed", (snapshot: UploadTaskSnapshot) => { console.log("SNAPSHOT", snapshot); }, (err) => { error.value = err; console.log("ERROR", err); }, async () => { // get download URL & make firestore doc const downloadUrl = await getDownloadURL(storageReference); url.value = downloadUrl; console.log("DOWNLOADURL", downloadUrl); } ); }); return { progress, url, error }; }; export default useStorage;El error de la consola no es suficiente. No da suficiente información.
Al ver el error de la consola, debe hacer clic en el otro error POST 400 rojo que se muestra en la consola. Esto lo llevará a la pestaña Red. Desde allí, desplácese hacia abajo y haga clic en el error rojo ofensivo. Esto finalmente debería mostrarle un mensaje de error más útil que dice algo como esto:
Permission denied. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources. Esto puede llevarlo a pensar que la culpa es de las reglas de Firebase Storage. Y debe verificar esas reglas antes de continuar, pero el problema más probable es que le falte un permiso esotérico firebase-storage@system.gserviceaccount.com dentro de Google Cloud Console.
Para arreglar eso, siga estos pasos:
¡Eso debería arreglarlo!
Primero vaya a Almacenamiento, pestaña Reglas y cambie permitir leer, escribir: si es falso; a verdadero; como se muestra a continuación.
rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if true; } } }