Error when uploading image to firebase using react js

Question

I am having issues uploading my picture to firebase, the problem seems to stem from [ firebase storage ] i've tried multiple iterations of it and still no luck.

in the console, i saw this error:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

This error also appears when i remove the comment to import storage from firebase.

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_1__.default.storage is not a function at Module../src/features/userprofile/firebase.js 19 it points to this line in my firebase.js file ->

   const storage = firebase.storage();

   import React, { useState, useEffect } from "react";
import { Paper } from "@mui/material";
//import axios from "axios";
import authHeader from "../../features/authentication/AuthHeader";
//import {storage} from "./firebase.js";
import {getStorage,ref,uploadBytes} from 'firebase/storage';

function UserProfile() {
  const [user, setUser] = useState({});

  async function fetchUser() {
    const response = await fetch("http://localhost:9005/getProfile", {
      headers: authHeader(),
    });
    const fetchedUser = await response.json();
    console.log(fetchedUser);
    setUser(fetchedUser);
  }

  useEffect(() => {
    fetchUser();
  }, []);

  //firebase upload
  const allInputs = { imgUrl: "" };
  const [imageAsFile, setImageAsFile] = useState("");
  const [imageAsUrl, SetImageAsUrl] = useState(allInputs);

  const handleImageAsFile = (e) => {
    const image = e.target.files[0];
    setImageAsFile((imageFile) => image);
  };

  const handleFireBaseUpload = e =>{
    e.preventDefault();
    console.log('uploading pic');
    if(imageAsFile===''){
      alert(`image format not supported${typeof(imageAsFile)}`);
    }

    const storage = getStorage();
    const storageRef = ref(storage,'tet');

    uploadBytes(storageRef,imageAsFile).then((snapshot)=>{
      alert('uploading');
    });
    //const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile);
  }
 

  return (
    <>
      

      <Paper
      
        elevation={6}
        style={{ margin: "10px", padding: "15px", textAlign: "left" }}
        key={user.user_id}
      >
      <div className="pfp">
          <form onSubmit={handleFireBaseUpload}>
            <input type="file" onChange={handleImageAsFile} />
            <p>hgk</p>
            <button>test</button>
          </form>
        </div>
        First Name: {user.firstName}
        <br />
        Last Name: {user.lastName}
        <br />
        Email: {user.email}
        <br />
        Phone: {user.phone}
      </Paper>
    </>
  );
}
export { UserProfile as default };

this is the firebase js

import {initializeApp} from "firebase/app";
import firebase from "firebase/compat/app"
import "firebase/storage" ;




const firebaseConfig = {
    apiKey: "this-key",
    authDomain: "this-domain",
    projectId: "this-project",
    storageBucket: "this-bucket",
    messagingSenderId: "this sender",
    appId: "this-id"
  };
  //initilize firebase
  firebase.initializeApp(firebaseConfig);

  const storage = firebase.storage();

  export{
    storage, firebase as default
  }

Tip: Remove all your tokens before posting online. Its super dangerous to have them online. Make use of an environmental variable. Please remove all the values of `appId`, `storageBucket`, `authDomain`, project `projectId` and most especially your `apiKey` — Sebastian Gbudje, Mar 19 '22 at 01:57
@SebastianGbudje https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public — Frank van Puffelen, Mar 19 '22 at 01:58
@FrankvanPuffelen Ahh i see i never knew that. That was quite informational for me Thank you. I always just avoid having my keys out there — Sebastian Gbudje, Mar 19 '22 at 01:59
Oh, I in general don't include them in Stack Overflow questions or answers, but that is mostly because they just distract from the real problem. — Frank van Puffelen, Mar 19 '22 at 02:08

score 0 · Answer 1 · answered Mar 19 '22 at 01:57

0

You don't seem to be importing from your firebase.js, since you commented out:

//import {storage} from "./firebase.js"`

Since you don't import firebase.js, the initializeApp call that is in there is not executed, and you have to call initializeApp before calling any other Firebase functions.

answered Mar 19 '22 at 01:57

Frank van Puffelen

565,676
79
828
807

i commented it out because if not, i get a white page, and this error TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_1__.default.storage is not a function at Module../src/features/userprofile/firebase.js – lams Mar 19 '22 at 01:59
That's a different error though. The error you posted in your question is caused by not calling `initializeApp`, and I explained why that is. Does that make sense? – Frank van Puffelen Mar 19 '22 at 02:07
yes, however, i am still left with the main problem. I tried different methods and they all give that error whenever i uncomment the import. is my firebase js looking right? i saw different ways for getting storage, but each time i try, i get the type error. – lams Mar 19 '22 at 02:10

Error when uploading image to firebase using react js

1 Answers1