File manager / image browser for React applications

Overview:

This package provides an intuitive GUI to easily manage your storage filesystem, share and organize files / images across your application. It aims to reproduce the experience of using a desktop file manager in a web browser context.

DEMO

Install:

npm i @jb_fmanager/react

yarn add @jb_fmanager/react

Use:

FileshareProvider

Context that enables sharing files throughout you application.

import { FileshareProvider } from "@jb_fmanager/react";

return (
  <FileshareProvider>
    <App />
  </FileshareProvider>
);

useUrls

Hook that gives access to shared urls. Example use.

import { useUrls } from "@jb_fmanager/react";

export const MyComponent = () => {
  const urls = useUrls();

  return (
    <ul>
      {urls.map((url) => {
        <li key={url}>
          <image src={url} alt={url} />
        </li>;
      })}
    </ul>
  );
};

ReactFileManager

Main component

import { ReactFileManager } from "@jb_fmanager/react";

// include it anywhere in your app

const App = () => {
  return (
    <App>
      {open && (
        <ReactFileManager
          host="http://localhost:4000"
          isOpen={open}
          mountAlias="media"
          // other opts
        />
      )}
    </App>
  );
};

prop	type	importance	default	description
isOpen	boolean	is required	undefined	Whether the component should mount or not.
onClose	function	is required	undefined	Callback function to unmount the element.
data	array	as per your needs	undefined	You can pass data explicitly to the component (map your public folder for instance) without fetching real data from external sources. If you want to map your local media files and other files from public / static folder you might need to adjust the mountAlias option properly, for instance: localhost:3000/images (to mount the public/images folder). Further I am explaining how the file tree structure should look like.
host	string	Must be specified if you're fetching from external source / server.	your host	Data provider
mountAlias	string	might be required, depends	empty sting	If you use prefix with your static files directory (can happen if your serving your bundle from one folder and media from another) or use a cloud storage for your media and files. Has to be a valid url starting with http(s) or localhost followed by a port number.
namespace	string	you can skip, provided you don't use the default anywhere else	api/fm	Namespace for api requests to prevent routing conflicts.
id	string	you can skip, provided you don't use the default anywhere else	jb_fmanager	A unique id to rule out potential unwanted DOM related side effects.
browserOnly	boolean	as per your needs	undefined	If present, changes to the file tree won't live outside the current browser session. Basically a read only mode. Disables uploads.
parentDarkMode	boolean	as per your needs	undefined	Allows to control the initial theme mode from outside
lightTheme	object	as per your needs	empty object	Custom light theme, if you want to override the default one. See styling instructions below..
darkTheme	object	as per your needs	empty object	Same as above.
stackIndex	number	as per your needs	5000	Postion on the Z axis.
maxUploadSize	string, number	as per your needs	5242880 (5 megabytes)	Maximum allowed byte size of a single file upload.

File tree:

// A basic file tree structure

  [
    id: 'root', // or public, or anything (the top level folder)
    parent_id: null,
    dir: true,
    info: {
       created: "20.10.2019 01:46:40",
       mb: "0.05",
       bytes: "63564",
    },
    children: [
      {
        id: "root/subfolder"
        parent_id: "root",
        dir: true,
        info: {
          //...
        },
        children: [
          {
            id: 'root/subfolder/some_image.jpg', // every id is built upon the parent's id
            parent_id: 'root/subfolder',
            dir: false,
            info {
                  //...
            },
            // other children
          }

        ]
      }

    ]
  ]

Custom themes:

Including a custom light / dark theme is very easy. Just override the properties below, and pass the object with the rest of the options.

 {
    overlay: "rgba(255,255,255,0.5)", // selected tile / record overlay
    input: {
      background: "transparent", // input background
      border: "#08acff", // input border
    },
    surface1: "#101010", // global
    surface2: "#6c6c6c", // file display
    surface3: "#030303", // navigation tree
    surface4: "#393939", // image / tile wrapper
    surface5: "#393939", // row / record wrapper
    surface6: "#141414", // context menu
    surface7: "#141414", // tooltip
    divider: "#3a3a3a", // border between sections
    font1: "#fff", // main font
    font2: "#c4c4c4", // secondary font
    font3: "#fff", // navigation font
    font4: "#fff", // contrast font
    syntax1: "darkgoldenrod", // folders on the main screen
    syntax2: "darkgoldenrod", // folders in the navigation tree
    syntax3: "#fff", // files on the main screen
    syntax4: "#fff", // files in the navigation tree
    syntaxFocus: "#08acff", // selection, focus
    primary: "#08acff", // primary color
    secondary: "#c4c4c4", // secondary color
    highlight: "rgba(255, 255, 255, 0.09)", // icon buttons background on hover
    shadow1: "0px 8px 13px -10px rgba(0, 0, 0, 0.25)", // global & tile shadow
    shadow2: "-5px 4px 12px -10px rgba(0, 0, 0, 1)", // dock shadow (right dock menu appears on smaller screens)
    shadow3:
      "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px", // menu, modal, tooltip
    shadow4:
      "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px", // file rows
  },

Backend:

The component is not bound nor should be to any backend implementation. It's concerned on accepting, parsing and displaying data. It communicates using http requests, but how they get processed is beyond it's concern. This means that you can use it with any http compatible solution. However, this section covers only nodejs.

Prebuilt setups for node filesystem:

These will setup all the necessary routes. Some additional steps might be required on you part depending on your case (setting up a static folder if you don't have that already, enabling cors maybe.).

jb-fmanager-express
jb-fmanager-fastify
jb-fmanager-koa

Service packages:

If you like more control you can use these packages directly:

jb-fmanager-node-utils if you use a server / filesystem storage.

jb-fmanager-s3 if you use the AWS S3 storage.