I am trying to create a Vue Composable that uploads a file to Firebase Storage.
To do this I am using the modular Firebase 9 version.
But my current code does not upload anything, and instead returns this error: FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Since this error is already coming from my console.log("ERROR", err); I'm not sure where else to look for a solution.
My code is implemented using TypeScript, incase that matters.
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;
The console error is not sufficent. It does not give enough information.
When viewing the console error you need to click the other red POST 400 error shown in the console. This will take you to the Network tab. From there scroll down and click the offending red error. This should finally show you a more helpful error message that reads something like this:
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.
This may lead you to think that it's your Firebase Storage rules to blame. And you should double check those rules before continuing, but the more likely problem is that you are missing an esoteric firebase-storage@system.gserviceaccount.com permission inside the Google Cloud Console.
To fix that take these steps:
That should fix it!
First go to Storage, Rules tab and change allow read, write: if false; to true; as shown bellow.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}