CODEWITHSUNDEEP
flutterfirebase-storageflutter-web
Abinandhan Selvaraj
Abinandhan Selvaraj

Reputation: 33

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

I am trying to upload an image to Firebase Storage using Flutter Web. I have followed many tutorials online on how to go about this, but I end up with the same error.

This is my code for upload

  pickImageFromGallery() async {
    imageFile = await ImagePickerWeb.getImageInfo;
    setState(() {
      _image = imageFile!.fileName!;
    });
  }

  Future<void> uploadFile(
      MediaInfo mediaInfo, String ref, String fileName) async {
    try {
      String mimeType = mime(path.basename(mediaInfo.fileName!))!;

      final String extension = extensionFromMime(mimeType)!;

      var metadata = fb.UploadMetadata(
        contentType: mimeType,
      );

      fb.StorageReference storageReference =
          fb.storage().ref('images').child('$fileName.$extension');

      fb.UploadTaskSnapshot uploadTaskSnapshot =
          await storageReference.put(mediaInfo.data, metadata).future;

      Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
      setState(() {
        _imageURL = imageUri.toString();
      });
    } catch (e) {
      setState(() {
        _imageURL = e.toString();
      });
    }
  }

This is my Storage rules for public access

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

This is the error I get

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response.
{
  "error": {
    "code": 404,
    "message": "Not Found."
  }
} (storage/unknown)

I have tried everything online that seems to be the solution, but there is no exact solution for this problem. Please help me figure out what may be the problem.

I am using Flutter Web, and the following packages: firebase, path, image_picker_web, mime_type

EDIT: Working Code

The problem seemed to be with the StorageReference. It worked once edited to the following:

fb.StorageReference storageReference = fb.storage().refFromURL('gs://storageBucket/').child('$fileName.$extension');

replace 'storageBucket' with your storageBucket name shown in Firebase Storage

Upvotes: 1

Views: 2377

Answers (3)

Charles Arko-Clayman
Charles Arko-Clayman

Reputation: 336

I also experienced this, because i did not update the firebase storage rules to allow me to write to the database

Upvotes: 2

Toivo S&#228;w&#233;n
Toivo S&#228;w&#233;n

Reputation: 2042

I got this error because when I copied the REACT_APP_FIREBASE_STORAGE_BUCKET variables from the .env file used in my local environment to Netlify which is my hosting service, I included the quotation marks (that is, I entered 'my.secret.url' instead of my.secret.url.

Upvotes: 0

Warao Shikyo
Warao Shikyo

Reputation: 11

I got the same error. It happens when the path can't reach the bucket, which I found out means "404 not found". Check the bucket name in storageBucket in firebaseConfig. In my case, I was using Dotenv and left a space after the double quotes. Dotenv was converting it to "" double quotation marks.

You can check the bucket name in the Firebase storage console. You don't need the "gs://" at the beginning or the "/" at the end. Just check the name. If you are using Dotenv, watch out for spaces.

Upvotes: 1

Related Questions