Question 120595 in Firebase Question posted in
An extensive official documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>
)
}

  2. 0

    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'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search