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

Answer 2

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 [email protected] permission inside the Google Cloud Console.

To fix that take these steps:

1. Go to https://console.cloud.google.com
2. Select your project in the top blue bar (you will probably need to switch to the "all" tab to see your Firebase projects)
3. Scroll down the left menu and select "Cloud Storage"
4. Select all your buckets then click "PERMISSIONS" in the top right hand corner
5. click "ADD PRINCIPAL"
6. Add "[email protected]" to the New Principle box and give it the role of "Storage Admin" and save it

That should fix it!