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)

### [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