How to use Firebase to upload images in Next.js?

I’m following a video tutorial about Nextjs and have seen that the version of Firebase he is using is out of date. I managed to follow all the steps reading the documentation until I got to this point.

Searched here and found some interesting answers on how to achieve the option to upload images to Firebase. Here the link

Have tried all solutions and none of them have worked. I get an error message:

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Bad Request

Here the code I’m trying:

import Image from "next/image";
import { useSession } from "next-auth/react";
import { FaceSmileIcon } from "@heroicons/react/24/outline";
import { VideoCameraIcon, PhotoIcon } from "@heroicons/react/20/solid";
import { useRef } from "react";
import { db, storage } from "../firebase";
import { collection, addDoc, serverTimestamp, doc, setDoc } from "firebase/firestore";
import { useState } from "react";
import {ref, uploadString, getDownloadURL, getStorage} from "firebase/storage";

function InputBox() {

    const {data: session} = useSession();
    const inputRef = useRef(null);
    const filePickerRef = useRef(null);
    const [imageToPost, setImageToPost] = useState(null);

    const sendPost = async (e) => {
        e.preventDefault();
        if(!inputRef.current.value) return;

        const colRef = collection(db, "posts")

        await addDoc(colRef, {
            message: inputRef.current.value,
            name: session.user.name,
            email: session.user.email,
            image: session.user.image,
            timestamp: serverTimestamp(),
        }).then((document) => {
            if(imageToPost) {
                const storageRef = ref(storage, `posts/${document.id}`);
                uploadString(storageRef, imageToPost, "data_url").then((snapshot) => {
                    getDownloadURL(snapshot.ref).then(URL => {
                        setDoc(doc(db, "posts", document.id), 
                        {imageToPost: URL}, {merge: true}
                        );
                    });
                })
                removeImage();
            }
        })
        inputRef.current.value = "";
    };

    const addImageToPost = (e) => {
        const reader = new FileReader();
        if(e.target.files[0]) {
            reader.readAsDataURL(e.target.files[0]);
        }

        reader.onload = (readerEvent) => {
            setImageToPost(readerEvent.target.result);
        }
    };

    const removeImage = () => {
        setImageToPost(null);
    };

    return ( <HERE THE REST OF THE CODE>

Don’t be mad at me. I really tried to do my best to find a solution and to not post here.

Any help will be really appreciated because I can’t figure out what is wrong, because as mentioned before I tried all options I found so far.

BTW also tried to assign storage to getStorage() before const storageRef = ref(storage, `posts/${document.id}`);

Like so:

.then((document) => {
   if(imageToPost) {
      const storage = getStorage();
      const storageRef = ref(storage, `posts/${document.id}`);

<MORE CODE>

And my firebase.jsfile:

import { initializeApp } from 'firebase/app';
import { getStorage } from "firebase/storage";

const firebaseConfig = {
    apiKey: "APIKEY-HERE",
    authDomain: "AUTHDOMAIN-HERE",
    projectId: "PROJECT-ID-HERE",
    storageBucket: "STORAGE-BUCKET-HERE",
    messagingSenderId: "MESSAGING-SENDER-HERE",
    appId: "APPID-HERE"
  };


  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  const storage = getStorage(app);

  export { db, storage };