Fluxo UIFluxo UIv0.4.93

File Browser

A generic, selectable file and folder browser with thumbnail, list and details views, kind-aware icons, image/video previews, drag-and-drop upload with filters and full keyboard navigation — for asset libraries, pickers and Drive / OneDrive style explorers.

Basic Usage

Files in thumbnail, list and details views

A selectable browser with file-kind icons, image/video thumbnails, inline video playback, per-item actions and full keyboard navigation. Toggle the view from the toolbar.

Quarterly Reports
24 items
Brand Assets
112 items
mountain-sunrise.jpgJPG
mountain-sunrise.jpg
412 KB
product-demo.mp4MP4
product-demo.mp4
8.0 MB
PDF
annual-summary.pdf
1.2 MB
release-notes.txt
4.0 KB
MP3
soundtrack.mp3
5.0 MB
design-tokens.json
16.0 KB
archive-2025.zip
45.0 MB
city-night.pngPNG
city-night.png
1.8 MB
proposal.docx
96.0 KB
View: thumbnail · Selected: none
import { FileBrowser } from 'fluxo-ui';
import type { FileBrowserItem, FileBrowserView } from 'fluxo-ui';

const [selected, setSelected] = useState<string[]>([]);
const [view, setView] = useState<FileBrowserView>('thumbnail');

<FileBrowser
    items={files}
    view={view}
    onViewChange={setView}
    showViewSwitcher
    selectedIds={selected}
    onSelectionChange={setSelected}
    videoPreview
    onItemOpen={(item) => console.log('open', item.name)}
    renderActions={(item) => <Button label="Open" size="xs" layout="plain" />}
/>

Upload & Filters

Drag-and-drop upload with type, size and count filters

Drop files anywhere on the browser, or use the empty-state button. accept, maxFileSize and maxSelection reject files and report why.

No files
Drop or pick files (images / PDFs, max 5 MB, up to 8).
import { FileBrowser } from 'fluxo-ui';
import type { FileBrowserItem, RejectedFile } from 'fluxo-ui';

<FileBrowser
    items={items}
    enableUpload
    multiple
    accept="image/*,.pdf"
    maxFileSize={5 * 1024 * 1024}
    maxSelection={8}
    uploadHint="Drop images or PDFs (max 5 MB)"
    onUpload={(accepted, rejected) => {
        addFiles(accepted);
        rejected.forEach((r) => console.warn(r.file.name, 'rejected:', r.reason));
    }}
/>

Folder Navigation

Folder navigation

Open a folder with Enter or double-click to drill in; the breadcrumb in the toolbar walks back out. The same pattern powers Google Drive / OneDrive style explorers.

NameTypeSizeModified
Photosfolder
Documentsfolder
readme.mdtext1.0 KB
const [path, setPath] = useState<string[]>([]);

<FileBrowser
    view="details"
    items={currentItems}
    toolbarStart={<Breadcrumb items={crumbs} onItemClick={navigate} />}
    onItemOpen={(item) => {
        if (item.kind === 'folder') setPath((p) => [...p, item.id]);
    }}
/>

Import

import { FileBrowser } from 'fluxo-ui';
import type { FileBrowserProps, FileBrowserItem, FileBrowserView } from 'fluxo-ui';

Props

itemsreq
FileBrowserItem[]

Items to render. Each: { id, name, kind?, subtitle?, thumbnailUrl?, previewUrl?, mimeType?, size?, modified?, badge?, loading?, disabled?, selectable?, meta?, data? }. When kind is omitted it is inferred from mimeType then the file extension.

selectedIds
string[]

Controlled selected ids. Omit to let the component manage selection internally.

onSelectionChange
(ids: string[]) => void

Called whenever the selection changes.

view
'thumbnail' | 'list' | 'details'

Controlled view. Omit to use defaultView and internal state.

defaultView
'thumbnail' | 'list' | 'details'"'thumbnail'"

Initial view when uncontrolled.

onViewChange
(view: FileBrowserView) => void

Called when the view changes via the switcher.

availableViews
FileBrowserView[]"['thumbnail', 'list', 'details']"

Which views the built-in switcher offers.

showViewSwitcher
boolean"false"

Render the built-in thumbnail/list/details toggle in the toolbar.

selectable
boolean"true"

Whether items can be selected.

multiple
boolean"true"

Allow selecting more than one item. Also controls whether the upload picker accepts multiple files.

maxSelection
number

Maximum number of items selectable at once when multiple. Also caps how many dropped/picked files are accepted for upload.

thumbnailFit
'cover' | 'contain'"'contain'"

How each image/video thumbnail fits its box.

minTileWidth
number"160"

Minimum tile width in px for the thumbnail grid.

columns
FileBrowserColumn[]"name / type / size / modified"

Columns rendered in the details view. Each: { key, header, width?, align?, render? }. The 'name' column auto-grows and shows the kind icon; built-in keys size/modified/kind format automatically, others read item.meta[key].

emptyState
React.ReactNode

Custom content shown when there are no items.

renderActions
(item: FileBrowserItem) => React.ReactNode

Render per-item action buttons (preview, edit, remove, download…). Shown on hover in thumbnail/list and inline in details.

renderPreview
(item: FileBrowserItem, kind: FileKind) => React.ReactNode

Override the default thumbnail/preview rendering for an item entirely.

renderItem
(item: FileBrowserItem, ctx: FileBrowserItemContext) => React.ReactNode

Fully override the tile body in thumbnail/list views. ctx exposes { kind, selected, view, toggle, open }.

onItemOpen
(item: FileBrowserItem) => void

Called on Enter or double-click — use for folder navigation or opening a preview.

onItemClick
(item: FileBrowserItem) => void

Called on single click, before selection toggles.

videoPreview
boolean"false"

Play video items inline (with controls) when their thumbnail is clicked. Falls back to a poster image with a play overlay.

enableUpload
boolean"false"

Enable drag-and-drop file upload onto the browser and a hidden file input opened via the empty-state button.

accept
string

Comma-separated accept list applied to uploads (e.g. 'image/*,.pdf'). Files not matching are rejected with reason 'type'.

maxFileSize
number

Maximum size in bytes for an uploaded file. Larger files are rejected with reason 'size'.

onUpload
(files: File[], rejected: RejectedFile[]) => void

Called after a drop or pick with the accepted files and the rejected ones (each carrying reason 'type' | 'size' | 'count').

uploadHint
React.ReactNode

Message shown in the drop overlay while dragging files over the browser.

className
string

Additional class for the container.

style
React.CSSProperties

Inline styles for the outer container (e.g. a minHeight so the drop zone stays usable when empty).

ariaLabel
string"'Files'"

Accessible label for the collection/grid container.

toolbarStart
React.ReactNode

Custom content rendered at the start of the toolbar (e.g. breadcrumb, search).

toolbarEnd
React.ReactNode

Custom content rendered at the end of the toolbar, before the view switcher.

Features

Three views

Thumbnail grid, compact list and a columned details view — switch built-in or control externally.

Kind-aware icons

Image, video, audio, PDF, document, text, code and archive kinds inferred from mime type or extension.

Media previews

Image and video thumbnails with inline playback, plus a renderPreview hook to override any tile.

Drag-and-drop upload

Drop files onto the browser or pick them, with accept, maxFileSize and maxSelection filters.

Folder navigation

Open folders via Enter / double-click and pair with a breadcrumb for Drive-style explorers.

Accessible

Listbox / grid roles, roving tab index, arrow / Home / End navigation and Space / Enter activation.