Upload to firebase error ".storage.ref is not a function"

Question

Inside my index.js file:

export function postArticleAPI(payload) {
   return(dispatch) => {
      const upload = storage
        .ref(`images/${payload.image.name}`)
        .put(payload.image);
      upload.on("state_changed", (snapshot) => {
        const progress = (
          (snapshot.BytesTransferred / snapshot.totalBytes) * 100);
          console.log(`Progress: ${progress}%`);
        if(snapshot.state === "RUNNING") {
          console.log(`Progress: ${progress}%`);
        }
      },
      (error) => console.log(error.code),
      async() => {
        const downloadURL = await upload.snapshot.ref.getDownloadURL();
        db.collection("articles").add({
        ...
        });
      });
    }
  };
}

I look in the docs provided by firebase but I am unsure how to implement that. When I run the code above, I get "TypeError: firebase__WEBPACK_IMPORTED_MODULE_0 _.storage.ref is not a function" error.

I messed around with the code and I've also gotten other errors such as: "...storage.put is not a function," I've gotten errors with upload, as well as db.collection error.

Here's my firebase.js:

import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
...
}

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth();
const provider = new GoogleAuthProvider();
const storage = getStorage(firebaseApp);
  
export { auth, provider, storage };
export default db;

Any help would be appreciated (and this is my first post, so please let me know if I need to add anything else). Thanks!

Answer 1

Since you're using the v9 syntax for importing top-level functions, there is no longer a storage.ref() method. Instead, as shown in the documentation on getting a reference and uploading files , you can do:

const ref = ref(storage, `images/${payload.image.name}`)
const upload = uploadBytes(ref, payload.image);