Firebase Storage: An unknown error occurred, please check the error payload for server response

Question

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;

Answer 1

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;
    }
  }
}