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

user_1526396 0
Viewed 14110

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;
firebase-storage firebase vue.js typescript
5 Answers

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

user_128357420

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:

  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 "Show INFO panel" in the top right hand corner
  5. click "ADD PRINCIPAL"
  6. Add "firebase-storage@system.gserviceaccount.com" to the New Principle box and give it the role of "Storage Admin" and save it

That should fix it!

user_15263960

Go to your firebase project console, go to Storage, then go to Rules, copy & paste this:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
    match /users/{userId}/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
user_83079470

The error code 400 shows in the debug console with a message that says you have to update your rules_version = '2'. Doing this solves the problem.

user_14193810

If you only want to allow logged in users to write to Firebase Storage you can use this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}
user_122862560
Related