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.
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 { ReactFileManger } 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.