I am trying to get an image picker to save to Firebase. I've read a number of tutorials as well as the official documentation for Google cloud storage. They all say to do something like this:
import { getStorage, ref } from "firebase/storage";
so you can:
const storage = getStorage()
and then
const ref = firebase.storage().ref();
No matter what I do, I cannot get anything but this error:
TypeError: (0, _storage.getStorage) is not a function. (In '(0, _storage.getStorage)()', '(0, _storage.getStorage)' is undefined)
I can see firebase/storage in my node_modules. I console-logged (firebase) to make sure it is a thing. I tried a million different kinds of import. I installed other firebase dependencies like @react-native-firebase to use their storage functions, but nothing is working. Everything else Firebase works fine for me.
I have no clue what the problem is. I would be happy to do it another way, but everything says to use the storage() method. Am I doing something wrong? Is there an alternative to using the storage method to upload images to the cloud?
Check the version of Firebase you have in your app.
Firebase version 8 uses the firebase.storage() method.
In order to use getStorage you need to use Firebase v9.x
See this guide on how to upgrade: Upgrade from version 8 to the modular Web SDK
For Version 8, make sure to click on the Web Version 8 tab in the Firebase Docs: https://firebase.google.com/docs/storage/web/upload-files
Here is a snippet of code that worked for me (Firebase V8).
My Firebase Initialization File: FirebaseInitialize.js
import firebase from "firebase/app";
import "firebase/storage";
import { firebaseConfig } from "./firebaseConfig";
firebase.initializeApp(firebaseConfig);
export { firebase };
My Firebase Config file
export const firebaseConfig = {
apiKey: "YOUR-API-KEY",
authDomain: "YOUR-DOMAIN.firebaseapp.com",
databaseURL: "https://YOUR-DOMAIN.firebaseio.com",
projectId: "YOUR-PROJECTID",
storageBucket: "YOUR-SOTRAGEBUCKET.appspot.com",
appId: "APP-ID",
};
Where I need to use storage, this is what I do this:
import { firebase } from "./FirebaseInitialize";
const storageRef = firebase.storage().ref();
storageRef.put(file).then((snapshot) => {
console.log("Uploaded!");
});
Hope this helps.
import firebase from "firebase/app";
import "firebase/storage";
worked for me make sure you use firebase version < 9
const handleUpload = async (pic) => {
try {
const response = await fetch(pic)
const blob = await response.blob()
const storageRef = firebase.storage().ref();
// storageRef.put(blob).then((snapshot) => {
// console.log("Uploaded!");
// });
let ref = storageRef.child("/images/" + decoded.id)
return ref.put(blob)
} catch (error) {
console.log(error)
}
}