CODEWITHSUNDEEP
typescriptfirebasevue.jsfirebase-storage
TinyTiger
TinyTiger

Reputation: 2111

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

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;

Upvotes: 18

Views: 37889

Answers (8)

Rens
Rens

Reputation: 745

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

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

Upvotes: 0

code8x
code8x

Reputation: 1970

Interesting but I got this error many times when using fb storage on ios simulator. Only one time I was able to upload a file successfully. So I thought this must be related to something with simulator and the storage library.

I immediately tested it with a real device and never got the error again.

I hope this experience will help someone else.

I'm thinking to open an issue on firebase github repo about this problem regards to ios simulators.

Upvotes: 3

Younis Rahman
Younis Rahman

Reputation: 737

I face the same issue. The problem from my side is that my image size is large. I got no errors after experimenting with small-sized images.

Upvotes: 2

Muhammad Zahid
Muhammad Zahid

Reputation: 170

Erase the device content and settings, then build. This worked for me. It's due to the simulator.

Clear Settings Option Location

Upvotes: 3

TinyTiger
TinyTiger

Reputation: 2111

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!

Upvotes: 15

MD. Saffan Alvy
MD. Saffan Alvy

Reputation: 337

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.

Upvotes: 1

Khaireddine Mejri
Khaireddine Mejri

Reputation: 101

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

Upvotes: 2

Ibrahim Kelly
Ibrahim Kelly

Reputation: 634

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

Upvotes: 39

Related Questions