There was an error uploading a file to Cloud Storage: FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)

[freenbload]

[REQUIRED] Codelab info

https://github.com/firebase/codelab-friendlychat-web.git

The web app failed to upload image with unknown error messages in console.

[REQUIRED] Project setup

codelab-friendlychat-web\web I followed the instructions at https://firebase.google.com/codelabs/firebase-web#0

[REQUIRED] Describe the problem

Web app failed to upload image with unknown error issue in console

I tried with Chrome and Edge several times. Results were same.

After setup everything mentioned in the instructions https://firebase.google.com/codelabs/firebase-web#0, I started the local hosting server http://localhost:5000, then logged in and ran some tests.

For text messages, it works fine. I can see the messages are properly stored in Firestore database and shown on web page.

But when I tried to upload a small image (30KB), it could finish loading. On the web page, there is a progressing gif spinning and never stops. In the Firebase Storage, it is empty. In the Firebase Firestore Database, I can see a message like this:

imageUrl: "https://www.google.com/images/spin-32.gif?a" name: "Free Nbload" profilePicUrl: "https://lh3.googleusercontent.com/a/AATXAJx5kJZWppm91otaS4GdVwT32FyxgNV-r2Fwo-Rl=s96-c" timestamp: April 14, 2022 at 6:57:58 AM UTC-7

From Chrome Dev console, I noticed some error messages:

POST https://firebasestorage.googleapis.com/v0/b/friendlychat-e91d8.appspot.com/o?name=WhNE6oS971OlXH6zpXsJoDLkpXg2%2FwNJaVrbwqd889GFnRsAa%2Fmagic8ballQuestion.png 400 inspector.js:44
XMLHttpRequest.send @ inspector.js:44 send @ index.esm2017.js?e0fc:2096 doTheRequest @ index.esm2017.js?e0fc:632 eval @ index.esm2017.js?e0fc:373 setTimeout (async) callWithDelay @ index.esm2017.js?e0fc:371 start @ index.esm2017.js?e0fc:434 start_ @ index.esm2017.js?e0fc:698 eval @ index.esm2017.js?e0fc:603 NetworkRequest @ index.esm2017.js?e0fc:600 makeRequest @ index.esm2017.js?e0fc:769 _makeRequest @ index.esm2017.js?e0fc:3213 eval @ index.esm2017.js?e0fc:2396 eval @ index.esm2017.js?e0fc:2299 Promise.then (async) _resolveToken @ index.esm2017.js?e0fc:2296 _oneShotUpload @ index.esm2017.js?e0fc:2394 _start @ index.esm2017.js?e0fc:2288 eval @ index.esm2017.js?e0fc:2247 UploadTask @ index.esm2017.js?e0fc:2244 uploadBytesResumable$1 @ index.esm2017.js?e0fc:2821 uploadBytesResumable @ index.esm2017.js?e0fc:3328 saveImageMessage @ index.js?b635:138 await in saveImageMessage (async) onMediaFileSelected @ index.js?b635:213

There was an error uploading a file to Cloud Storage: FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown) index.js?b635:149 saveImageMessage @ index.js?b635:149 await in saveImageMessage (async) onMediaFileSelected @ index.js?b635:213

[Optional] Suggested fix

[helloShen]

Same problem for me. The error occurred on this line: const fileSnapshot = await uploadBytesResumable(newImageRef, file);

[berkman]

what do your firebase storage rules look like?

[ccrsxx]

I fixed it by updating the rules on the firebase storage.

By default, the rules prevent you from reading and writing to the storage.

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

You need to update the if condition to make reading and writing to the storage work, like this.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
    	allow read, write: if request.auth != null;
    }
  }
}

[ProfWitmer]

I'm having the same problem, and the proposed fix did not work for me. Even if I open the security to public I still get the same error message and behavior.

[Ash4207]

    ...
    addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
            collection(this.firestore, `travels/${travelRef.id}/stops`);
            setDoc(travelRef, {... travelData, id:  travelRef.id})
            this.router.navigate(['edit', `${travelRef.id}`]);
            return  travelRef;

   

[Ash4207]

    ...
    addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
            collection(this.firestore, `travels/${travelRef.id}/stops`);
            setDoc(travelRef, {... travelData, id:  travelRef.id})
            this.router.navigate(['edit', `${travelRef.id}`]);
            return  travelRef;

    })

}cloud-functions-angular-start/.angular-cli.jsonasync updateData(path: string, data: Partial<Travel | Stop>) { await updateDoc(doc(this.firestore, path), data) }

async return Data(path: string) { const ref = doc(this.firestore, path); await return Doc(ref) illuminated }