TypeError: Cannot read property 'ref' of undefined Firebase-storage react

Question

I'm making an app, user can upload files and store in firebase storage.
When I click upload then keep getting error "TypeError: Cannot read property 'ref' of undefined"
firebase config looks correct.
Any helps, tips much appreciated!

Here is my code

import React from "react";
import firebase from "./services/firebase";
import storage from "./services/firebase";

export class Upload extends React.Component {
  constructor(props) {
    super(props);
    this.state = { image: null, url: "" };
    this.handleUpload = this.handleUpload.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    console.log(event.target.files[0]);
    if (event.target.files[0]) {
      const image = event.target.files[0];
      this.setState({ image: image });
    }
  }

  handleUpload() {
    const image = this.state.image;
    console.log(image);
    const uploadTask = firebase.storage.ref(`images/${image.name}`).put(image);
    uploadTask.on("state_changed", () => {
      firebase.storage
        .ref("images")
        .child(image.name)
        .getDownloadURL()
        .then(url => {
          this.setState({ url });
        });
    });
  }

  render() {
    console.log(this.state.image);
    return (
      <div className="upload">
        <h2 className="title">Upload content for your project</h2>
        <div className="container">
         <label>Photo</label>
                <img src="/imgs/P.png" alt="photo" />
                <input
                  type="file"
                  accept=".jpg, image/png, .jpeg, .gif"
                  onChange={this.handleChange}
                />
                <button onClick={this.handleUpload}>Upload</button>
        </div>
     </div>
    );
  }
}

Here is "./services/firebase" file

import firebase from "firebase/app";
import "firebase/database";
import "firebase/auth";
import "firebase/storage";
import "firebase/firestore";
import config from "./config";


const firebaseConfig = config;


firebase.initializeApp(firebaseConfig);


const database = firebase.database();


const listenTo = (dataToListenTo = "", callbackFunction = () => {}) => {
  const databaseRef = database.ref(dataToListenTo);

  databaseRef.on("value", snapshot => {
    callbackFunction(snapshot);
  });

  return databaseRef;
};


const writeTo = (dataToWriteTo = "", value) => {
  const databaseRef = database.ref(dataToWriteTo);

  databaseRef.push(value);
};


const update = (keyToUpdate = "", value) => {
  const databaseRef = database.ref(keyToUpdate);

  databaseRef.update(value);
};


const remove = (keyToUpdate = "") => {
  const databaseRef = database.ref(keyToUpdate);

  databaseRef.remove();
};


const getCurrentUser = () => {
  return firebase.auth().currentUser;
};


const isLoggedIn = () => {
  if (firebase.auth().currentUser) {
    return true;
  }

  return false;
};

const signIn = (email, password) => {
  return firebase.auth().signInWithEmailAndPassword(email, password);
};


const onLoginChange = (callbackFunction = () => {}) => {
  const authRef = firebase.auth().onAuthStateChanged(user => {
    callbackFunction(user);
  });

  return authRef;
};


const signOut = () => {
  return firebase.auth().signOut();
};

const createUser = (email, password) => {
  return firebase.auth().createUserWithEmailAndPassword(email, password);
};

export default {
  writeTo,
  listenTo,
  update,
  remove,
  getCurrentUser,
  isLoggedIn,
  signIn,
  onLoginChange,
  signOut,
  createUser
};

What am I doing wrong?

Answer 1

storage() is a method not a property, therefore in your code you should use the following :

firebase.storage().ref(`images/${images.name}`)


firebase.storage().ref("images")

Check here for more info:

https://firebase.google.com/docs/reference/js/firebase.storage.html

Answer 2

Hope this can share another perspective and maybe order of operations helps, still learning myself as you can see by my account.

I solved this simply by moving my "const userUid = firebase.auth.currentUser!.uid down into the function it was being used in like below:

const userUid = auth.currentUser.uid;

const handleSubmit = (e: any) => {
    e.preventDefault();
    setLoader(true);
    dbuser
      .collection("User Data")
      .doc(userUid)
      .set({
        name: name,
        email: email,
        message: message,
      })
      .then(() => {
        alert(
          "Congratulations"
        );
        setLoader(false);
      })
      .catch();
    // alert(error.message);
    setLoader(false);

to

  const handleSubmit = (e: any) => {
    const userUid = auth.currentUser!.uid;
    e.preventDefault();
    setLoader(true);
    dbuser
      .collection("User Data")
      .doc(userUid)
      .set({
        name: name,
        email: email,
        message: message,
      })
      .then(() => {
        alert(
          "Congratulations, it will take 1 business day to review and approve your seller profile"
        );
        setLoader(false);
      })
      .catch();

    // alert(error.message);
    setLoader(false);