@reopt-ai/opt-filemanager

Connector-driven React file manager: folder browsing, breadcrumb navigation, list/grid views, multi-select, name filtering, file detail with image/text preview, rename, move, delete, and a storage-usage meter — every action gated by the capabilities the storage backend advertises.

Uploads are a first-class pipeline: a concurrency-limited queue with an aggregate progress header (retry-all-failed, cancel-all, collapse), folder drag-and-drop that recreates the dropped directory tree, drop-onto-a-folder-row targets, clipboard paste-to-upload, and instant size/quota rejection.

Install

npm install @reopt-ai/opt-filemanager

Quick start

import {
  FileManager,
  createMockFileManagerConnector,
} from "@reopt-ai/opt-filemanager";
import "@reopt-ai/opt-filemanager/styles.css";

const connector = createMockFileManagerConnector();

export function Demo() {
  return <FileManager connector={connector} locale="ko" />;
}

Connectors

A connector implements the FileManagerConnector contract: a required list, optional mutation methods, and a capabilities object. The UI hides every action whose capability is false, so read-only or folder-less backends render a coherent surface without extra configuration.

• createMockFileManagerConnector(options) — in-memory tree with configurable latency, failure injection, upload progress simulation, and seed reset. Ideal for demos and tests.
• createBrandappFilesConnector({ client }) — adapter for the brandapp files API. Inject any client with the BrandappFilesClientLike shape: createReoptFileClient(...) from @reopt-ai/brandapp-sdk/files on the server, the reopt brandapp dev mock server, or a fetch proxy. The brandapp namespace is flat (no folders/rename); uploads are capped at 10 MB server-side and deletes may be rejected with FILE_IN_USE when a file is referenced elsewhere — the error message is surfaced in the UI.
• Custom — implement FileManagerConnector against any storage backend.

Headless usage

useFileManager({ connector }) returns the full state controller (navigation, entries, selection, sorting, upload queue) without any UI, and the exported subcomponents (FileManagerToolbar, FileManagerEntryList, FileManagerDetailPanel, …) can be recomposed inside a custom FileManagerContextProvider layout.

Theming

Structural CSS ships from dist/styles.css, scoped to [data-opt-filemanager]. Colors resolve from var(--opt-*) tokens (injected by opt-shell's ShellProvider via opt-palette) with hardcoded fallbacks — no hard dependency on either package.