Firebase File Uploader React

React component for uploading files to Firebase

You need to initialize a firebase application and create the storage object.

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import firebaseConfig from "./config";

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

const Firebase = {
  storage,
};

export default Firebase;
export { storage };

How To Install?

npm i firebase-file-uploader-react

Custom Hook Required Config object:

const config = {
    storage,
    path: 'products'
    includeExt?: false optional:BOOLEAN to include file extension type to file name
    filename?: (filename) => "t-shirt", optional: STRING or FUNCTION for custom filename\
    or uploaded cloud file,as FUNCTION passes the original filename as\
    func args e.g filename: (originalFilename)=>{ return `${originalFilename}-fancyname`}\
    e.g 2 filename: (originalFilename)=>originalFilename to keep original filename
}

How To Use?

import { useFirebaseFileUploader } from 'firebase-file-uploader-react';

const App = () => {
    const { FileUploaderUI, uploading, progress, error, fileURL, originalFilename, inputElement, fileType } =
    useFirebaseFileUploader({
      storage,
      path: "products",
      filename: "t-shirt"
    });
    return (
      <FileUploaderUI
        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        accept="image/*"
        id="imagen"
        name="imagen"
        draggable="true"
      />
    )
}

Style

this component haven't any style;

You can use the way you like to style it.

FileUploaderUI Default Props

| Prop | Type | Is Required? | Comment | | :--: | :------: | :------------: | ---------------- | | type | property | Default (file) | Read more in MDN |

Accept input type file properties