How to upload images file in firebase in reactjs in newest update

Question

I'm having a trouble of how I will upload the images in firebase. So basically I separated the firebase.js file and the imageupload.js file

It is something like this. in firebase file

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


const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxxx",
  measurementId: "xxxx"
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export { storage };

And somethingg like this in my upload.js file

import {storage} from './firebase'

      const uploadTask = storage.ref(`images/${image.name}`).put(image)
      uploadTask.on(
        "state_changed",
        snapshot => {},
        error => {
          console.log(error)
        },
        () => {
          storage
            .ref("images")
            .child(image.name)
            .getDownloadURL()
            .then(url => {
              console.log(url)
            })
        }
      )

and giving me an error like this

Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_3__.storage.ref is not a function

And I don't understand what this means.. I already try some other information but it doesn't match very well how I will coded it up..Please help..this will be my final issue in my full stack website..I badly need help to get this done thank you.

UPDATED

this is my firebase file
import firebase from "firebase/compat/app";
import { getStorage, ref } from "firebase/storage";

const firebaseConfig = {
...
};

firebase.initializeApp(firebaseConfig);

const storage = getStorage();
const storageRef = ref(storage)

export { storageRef };

and this is my uploadfile.js

import { getStorage, ref } from "firebase/storage";

import { storageRef } from "./firebase";

      const uploadTask = ref(storageRef,`images/${image.name}`)
      uploadTask.on(
        "state_changed",
        snapshot => {
        },
        error => {
          console.log(error);
        },
        () => {
          storageRef
            .ref("images")
            .child(image.name)
            .getDownloadURL()
            .then(url => {
              console.log(url)
            });
        }
      );

but this time it show an error like this

Uncaught TypeError: uploadTask.on is not a function

Answer 1

From the docs, the correct way to get ref is as follows.

Example with v9

import { getStorage, ref } from "firebase/storage";

// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage();

// Create a storage reference from our storage service
const storageRef = ref(storage);

Ref: https://firebase.google.com/docs/storage/web/create-reference

Answer 2

You need to import "uploadBytesResumable" and "getDownloadURL"

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

and then change

const uploadTask = ref(storageRef, `images/${image.name}`);

to

const imageRef = ref(storageRef, `images/${image.name}`);
const uploadTask = uploadBytesResumable(imageRef, image);

and doing that you will be able to use uploadTask.on(), something like this would look:

import { getStorage, ref, uploadBytesResumable, getDownloadURL} from "firebase/storage";

import { storageRef } from "./firebase";

const imageRef = ref(storageRef, `images/${image.name}`);
const uploadTask = uploadBytesResumable(imageRef, image);

uploadTask.on(
   "state_changed",
   (snapshot) => {
     //your code...
   },
   (error) => {
     console.log(error);
   },
   () => {
     getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
       console.log(downloadURL);
     });
   }
);;