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;
