FirebaseError: Firebase Storage: An unknown error occurred

[yumietzk]

My environment

• Operating System: macOS
• Browser: Chrome
• Firebase SDK version: v9
• Firebase Product: Storage

The problem

I have an unknown error when trying to upload images to Cloud Storage while specifying metadata for the files and monitoring upload progress.

const imagesRef = ref(storageRef, `${path}`);
 
const metadata = {
     contentType: "image/jpeg",
};
 
const uploadTask = uploadBytesResumable(imagesRef, file, metadata);
 
uploadTask.on(
     "state_changed",
     (snapshot) => {
       const currentProgress = Math.round(
         (snapshot.bytesTransferred / snapshot.totalBytes) * 100
       );
       setProgress(currentProgress);
     },
     (error) => {
       console.error(error);
       toast.error("Error uploading file", { position: "top-right" });
       setProgress(-1);
     },
     () => {
       getDownloadURL(uploadTask.snapshot.ref)
         .then((url) => handleFinish(url, file.name))
         .catch((err) => console.error(err))
         .finally(() => {
           setFile(null);
           setProgress(-1);
         });
    }
);

The unknown error:

However, in Firebase Storage, it seems like images are uploaded as I can see them although the file type that I try to specify as “image/jpeg” remains the default one as “application/octet-stream”:

Solution that I tried (Failed)

Since there is no detailed explanation to solve this error here, I tried to implement the feature to upload images in the simplest way first using uploadBytes() method.

const imagesRef = ref(storageRef, `${path}`);
 
const metadata = {
     contentType: "image/jpeg",
};
 
uploadBytes(imagesRef, file, metadata).then((snapshot) => {
     console.log("Uploaded a blob or file!");
});
 
// const uploadTask = uploadBytesResumable(imagesRef, file, metadata);
 
// uploadTask.on(
//   "state_changed",
//   (snapshot) => {
//     const currentProgress = Math.round(
//       (snapshot.bytesTransferred / snapshot.totalBytes) * 100
//     );
 //     setProgress(currentProgress);
//   },
//   (error) => {
//     console.error(error);
//     toast.error("Error uploading file", { position: "top-right" });
//     setProgress(-1);
//   },
//   () => {
//     getDownloadURL(uploadTask.snapshot.ref)
//       .then((url) => handleFinish(url, file.name))
//       .catch((err) => console.error(err))
//       .finally(() => {
//         setFile(null);
//         setProgress(-1);
//       });
//   }
// );

This works perfectly. There is no error, and I see the uploaded images in Firebase Storage whose file type changes to “image/jpeg” as expected (image2):

However, when switching the method to uploadBytesResumable() method, the unknown error shows up again. I am not sure if this is the error from the uploadBytesResumable() method, or if this is because of my environment, or if there are other problems.

For now, there is no clear solution other than just not using the uploadBytesResumable() method.