react-firebase-image-upload-control

A image uploader for react that uploads images firebase storage.

Installation

Run yarn add react-firebase-image-upload-control or npm i react-firebase-image-upload-control --save-prod to install the package in your app.

Prerequisites

You will need react, react-dom and firebase installed in your app. They are listed as peer dependencies only for this package, so installing the package will not automatically install those packages in your app.

Make sure you have initialized firebase somewhere in your app using your Firbase project's JSON file, e.g.:

import firebase from "firebase";

const config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com"
};
const firebaseApp = firebase.initializeApp(config);

You can copy your firebase-config.json file down from your Firebase project. See Google's instructions on how download your config file; (you want the "web app" file). Your project must be enabled for Cloud Storage, in which case it will have the storageBucket property shown in the example above.

You will need to have logged into your Firebase project in your app before attempting to use the control. You check the demo app in this repo to see how I do that.

Example

This is a shortened version of App.js in the /demo folder.

// Example code created with Create React App
import React, {useEffect, useState} from "react";
import {initializeApp} from "firebase/app";
import {
  browserSessionPersistence,
  getAuth,
  setPersistence,
  signInWithEmailAndPassword,
  signOut
} from "firebase/auth";
import "firebase/database";
import "./App.css";

import ReactFirebaseImageUploader from "./.package";
import Login from "./Login";

// You must supply this!
import firebaseConfigObj from "./firebaseconfig/firebase-config.json";
const firebaseApp = initializeApp(firebaseConfigObj);
const auth = getAuth();

const loginProviders = {
  signInWithEmailAndPassword,
  signOut,
  browserSessionPersistence,
  setPersistence
};

const App = () => {
  const [currentUser, setCurrentUser] = useState();
  const [loginDetailsPolled, setLoginDetailsPolled] = useState(false);

  const imageUploaderSharedProps = {
    firebaseApp,
    storageFolder: "rfiu-test"
  };

  useEffect(() => {
    auth.onAuthStateChanged(function (user) {
      if (!loginDetailsPolled) {
        setLoginDetailsPolled(true);
      }
      setCurrentUser(user?.email);
    });
    return () => {};
  }, [loginDetailsPolled]);

  return (
    <div className="App">
      <h1>React Firebase Image Uploader Test</h1>
      {loginDetailsPolled ? (
        <Login {...loginProviders} auth={auth} user={currentUser} />
      ) : (
        "Checking login details..."
      )}
      <div style={{marginTop: 40, marginBottom: 100}}>
        {currentUser ? (
          <>
            <div>
              <h4>Vanilla Example</h4>
              <ReactFirebaseImageUploader
                {...imageUploaderSharedProps}
                multiple
              />
            </div>
          </>
        ) : null}
      </div>
    </div>
  );
};

Props

The main two props you need to pass, as shown in the example above, are firebaseApp and storageFolder.

For the other props available, check the documentation of module & props. These are autogenerated from typescript interfaces. See the FirebaseUploadImageProps interface.

Contributing

You're a Dev and you want implement a fix or add a feature? Read the instructions on how to contribute to the this package.

Changes

Read the change log.

Acknowledges

This package is really just a stitching together of two other projects, react-firebase-file-uploader and react-dropzone.