While following a tutorial on Next.js, I encountered an issue with the outdated version of Firebase being used. Despite trying different solutions from the documentation and various sources, I am still facing an error message while attempting to upload images to Firebase.
I came across some helpful answers on Stack Overflow regarding this issue: Here is the link
Unfortunately, none of the suggested solutions have worked for me, as I keep receiving the following error:
FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Bad Request
Below is the code snippet that I have been working on:
import Image from "next/image";
import { useSession } from "next-auth/react";
import { FaceSmileIcon } from "@heroicons/react/24/outline";
...
<Code continues here>
...
Despite my best efforts to troubleshoot and find a solution independently, I have not been successful. Any assistance or guidance would be greatly appreciated, as I am at a loss for what might be causing this issue.
In addition to implementing suggestions from other users, I also attempted to explicitly assign storage using getStorage() before the relevant line of code but without success:
.then((document) => {
if(imageToPost) {
const storage = getStorage();
const storageRef = ref(storage, `posts/${document.id}`);
<More code included>
For reference, here is the content of my 'firebase.js' file:
import { initializeApp } from 'firebase/app';
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: "APIKEY-HERE",
authDomain: "AUTHDOMAIN-HERE",
...
<Configuration details continue>
...
export { db, storage };