How do I use firebase storage from a client side React app?

I’m trying to write a file into cloud storage from within my React app. I created a new React app using the create-react-app tool. I believe I have followed the correct instructions to get a storage reference, with code like this: this.storage = firebase.storage();. But, no matter how I configure firebase and no matter what I import, I see this error: TypeError: _this.firebase.storage() is not a function..

I tried importing @firebase/storage (commented out here) but this results in an error, and the NPM page for that module suggests this is not something a user should ever load directly.

I believe I added the proper firebase libraries. I can use firestore and the legacy database (I removed the code to do it, but it works if I use something like this.firestore = this.firebase.firestore();). But, storage is unresolved.

I’m a little unclear as to whether I should be using client libraries for cloud storage (I believe that is exactly the same thing as “storage” for Firebase). But, all the examples seem to be for accessing storage from a NodeJS app, and I want to write the file from within my browser context as client-side JavaScript.

My package.json looks like this:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@firebase/app": "^0.3.2",
    "@firebase/auth": "^0.5.2",
    "@firebase/firestore": "^0.5.6",
    "@material-ui/core": "^1.3.1",
    "@material-ui/icons": "^1.1.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "scripts": {
    "start": "PORT=3009 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

My index.js looks like this:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import firebase from '@firebase/app';
import '@firebase/firestore';
import '@firebase/auth';
//import '@firebase/storage';                                                                                                                  

var config = {
    apiKey: "ABCDEFG",
    authDomain: "abcdefg.firebaseapp.com",
    databaseURL: "https://abcdefg.firebaseio.com",
    projectId: "abcdefg",
    storageBucket: "abcdefg.appspot.com",
    messagingSenderId: "12345"
};

firebase.initializeApp(config);

class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.firebase = firebase;
        this.firestore = this.firebase.firestore(); // This works fine.
        this.storage = this.firebase.storage(); // This fails
        console.log( "Got storage ref" );
    }

    render() {
        return (
            <div>
                Hello
            </div>
        )
    }
}

ReactDOM.render(
        <Index/>,
    document.getElementById('react-container')
);

The firebase config is copied from the Firebase console (but changed here).

Answer

This works: $ npm i @firebase/storage --save.

This currently results in "@firebase/storage": "^0.2.3" inside package.json.

If I have that, I can use code like this in my firebaseConfig.js file to setup storage inside firebase:

import firebase from '@firebase/app';
import '@firebase/firestore';
import '@firebase/auth';
import '@firebase/storage';

Then code like this works:

const storage = firebase.storage();
const files = [ 'image1.png', 'image2.png' ]; 
files.map( filename => {
    storage
      .ref( `/covers/${filename}` )
      .getDownloadURL()
      .then( url => {
        console.log( "Got download url: ", url );
      });
});

Advertisement

Answer