CODEWITHSUNDEEP
javascriptreact-nativeexpofirebase-storage
reduxredux
reduxredux

Reputation: 23

Cannot import { getStorage } from firebase/storage to use with React Native Expo image picker

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?

Upvotes: 1

Views: 5895

Answers (3)

dbuu College
dbuu College

Reputation: 1

**

Cannot import { getStorage } from firebase/storage to use with React Native Expo image picker

**

use this official documentation to use storage from firebase this is the official website link to understand that how to correctly implement storage or bucket from firebase

here click on this link
or

https://modularfirebase.web.app/common-use-cases/storage/

Upvotes: 0

oussama benkortbi
oussama benkortbi

Reputation: 11

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

Upvotes: 1

T J
T J

Reputation: 749

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.

Upvotes: 1

Related Questions