Uncaught TypeError: firebase.storage is not a function (In new version)

user_19290428 0
Viewed 29

There is similar questions in stackoverflow but none of that fixed my issues... Maybe because that questions are old and the solutions for older versions.... So I tried different methods I saw but none of it helped still showing the same error.. please help me fix it friends...

Create.js file:

    import { FirebaseContext, AuthContext } from '../../store/Context';    
    const { firebase } = useContext(FirebaseContext);
    const handleSubmit = () => {
        firebase.storage().ref(`/image/${image.name}`).put(image).on('state_changed').then(({ ref }) => {
          ref.getDownloadURL().then((url) => {
            console.log(url);
          })
        })
      }
      return (
    <Fragment>
    <button className="uploadBtn" onClick={handleSubmit}>Upload and Submit</button>
    <Fragment/>
    )

I have added only the necessary parts here. The firebase config file has the following imports:

import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/storage'

I am doing my project in React.

firebase-storage firebase reactjs javascript
2 Answers

You're importing the compat paths of auth and firestore, which means you can use the namespaced syntax when using those products. But for storage you're importing the default path, meaning you must use the new modular syntax of the SDK version you use.

To be able to use the namespaced syntax for storage too:

import 'firebase/compat/storage'
user_2091030

For Uploading image to firebase storage and get the url for the uploaded image, You can use this:

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

const Create = () => {

 const handleSubmit = () => {
    const storage = getStorage();
    const storageRef = ref(storage, `/image/${image.name}`);
    //uploads the file to firebase storage
    uploadBytes(storageRef, image).then((snapshot) => {
      console.log('Uploaded a blob or file!');
    }
    ).then(() => {
      //gets the url for the uploaded image
      getDownloadURL(ref(storage, `/image/${image.name}`)).then((url) => {
        console.log('url is: ' + url);
      })
    })
  }

  return (
    <Fragment>
      <div>
        <button className="uploadBtn" onClick={handleSubmit}>Upload</button>
       </div>
    </Fragment>
)
}
user_192904280
Related