FileBrowser

import FileBrowser from "@arclockproject/common/components/FileBrowser";

For examples and live demos, see the FileBrowser guide.

Component · default export

Shows a list of file paths as folders and files that can be browsed by clicking. A breadcrumb bar at the top jumps back up; ^ goes to the root.

Single-child folders at the top are opened automatically, so a shared prefix like /home/user does not need clicking through.

Props

fileSystemRaw (string[]) — Full file paths, separated by /. Folders are built from them.
base? (string) — Prefix added to every path, e.g. a base URL.
fillContainer? (boolean, default true) — Fill the parent element. When false, the browser is at most 972px wide and 700px tall.
customAction? ((file: string) => void) — Called with the full path (including base) when a file is clicked.

Not called for folders.

Example

<FileBrowser
  fileSystemRaw={["/docs/readme.md", "/images/logo.png"]}
  customAction={(file) => console.log(file)}
/>

FileBrowser​