React + Capacitor + Firebase Image Upload

An image upload UI built for react/capacitor utilizing firebase storage.

Demo

Features:

• Automatically adds image width & height in firebase storage customMetadata field.

Install

yarn add react-capacitor-firebase-image-upload

Quick Usage

App.tsx (Or other high level component)

import { ImageUploadContextProvider, ImageUploadContext } from 'react-capacitor-firebase-image-upload';

import * as firebase from 'firebase/app';
import 'firebase/storage';

const fire = firebase.initializeApp({
  ... firebase key stuff here ...
});

const storage = firebase.storage().ref();

...

const App: React.FC = () => {
  const { open } = useContext(ImageUploadContext);
  return (
    <App>
        <ImageUploadContextProvider firebaseStorageRef={storage}>
            {/* <Routes & Other App Stuff> */}
            <button onClick={() => open(console.log, console.error)}>
        </ImageUploadContextProvider>
    </App>
  );
};

ImageUploadContextProviderProps

Key	Type	Required	Default	Description
buttonColor	string	No	"#222"	Color of the primary buttons
acceptedFileTypes	string[]	No	['image/png', 'image/jpeg', 'image/bmp']	String array of accepted file types
firebaseStorageRef	firebase.storage.Reference	Yes	undefined	The reference object to your firebase storage

ImageUploadContext

| Key | Type | Description | | ------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | | isOpen | boolean | State of the image upload overlay | | open | (successOrCancelFunction?: (result: ImageUploadSuccess | undefined) => void, errorCallback: (err:Error) => void, opts?: ImageUploadOptions) => void; | Function to call when you want to open the image upload overlay | | close | () => void; | Function to call when you want the overlay to close |

ImageUploadOptions

Key	Type	Description
pathPrefix	string	Prefix for the storage location (ex: "user_avatars/" would upload images to a user_avatars folder)

Feature wishlist:

• Cropping
• Capacitor native camera/camera roll