I'm creating an app on React that uses Firebase for backend data and want to be able to upload pictures. When trying to get a Storage Ref through firebase, I get the following error:
Every time I try to get a ref to the Storage, I get this error. I also use the realtime-databse on firebase, but I don't think that would interfere at all. Below is the code that is called:
import database, { auth, provider, storage } from '../../components/utils/firebase.js';
import { uploadBytes } from '@firebase/storage';
...
handleSubmit(e) {
e.preventDefault();
const file = e.target[0].files[0];
console.log("File: ", file);
if (!file) {
console.log("No file!");
} else {
const storageRef = ref(storage, `images/${file.name}`);
uploadBytes(storageRef, file);
console.log("Uploaded file!");
console.log("File: " + file);
}
}
firebase.js (my config file):
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
const firebaseConfig = {
apiKey: process.env.REACT_APP_APIKEY,
authDomain: process.env.REACT_APP_AUTHDOMAIN,
databaseURL: process.env.REACT_APP_DATABASEURL,
projectId: process.env.REACT_APP_PROJECTID,
storageBucket: process.env.REACT_APP_STORAGEBUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
appId: process.env.REACT_APP_APPID,
measurementId: process.env.REACT_APP_MEASUREMENTID
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
export const storage = getStorage(app);
export default database;
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();
Does anyone have any ideas as to why this is happening? Thank you!
I found the issue while watching a video of someone setting up their storage bucket.
Essentially, because I am already using ref for my realtime database, and import that command from the realtime database folder, my storage ref was actually a realtime database ref. To fix this, I imported my storage ref function like so:
import { ref as sRef } from 'firebase/storage';
then used sRef instead of ref.
Hope this helps anyone who had the same issue! It was frustrating to hunt down