Files

A file manager with a folder tree, multi-select, a context menu, and drag-in upload.

Since 0.6.0BETA

This component doc is in progress

This page is still being migrated. Demos and API details may change.

Usage

Workspace files

Click to select, double-click to open, Space to preview, right-click for the menu; drag files in from the desktop. Sample data; files never leave the browser.

Loading demo...

Overview

The files of a Tuff workspace, synced across devices, plus a Plugin storage partition held to the host's real limits.

  • Selecting: click selects, ⌘ / Ctrl adds, Shift extends, the arrow keys move by row and column, and Esc clears; the keys live on the file area.
  • Opening: double-click or Enter opens; Space opens quick look, where ← / → step through; F2 renames; ⌫ / Delete deletes, with Undo.
  • Right-click, Shift + F10, or the Menu key opens one menu, anchored to the focused tile from the keyboard; drag tiles onto a folder in the tree to move them.
  • Files dragged in from the desktop upload with per-file progress in a tray; a plugin folder refuses files past its limits (10 MB each, 100 MB in total, 1,000 files) or with invalid names.
  • The first time it scrolls into view, two screenshots sync in from a MacBook; with reduced motion they are there from the start.
  • Expanded (≥ 960px) enlarges the tree and tiles, and from 1200px a preview pane appears; below 640px the tree hides and sub-folders show as tiles.

Customization

  • For real storage, replace the simulated progress with the upload request's progress events; TxFileUploader only receives File objects, so validate in the host, sharing one set of constants with the real limits.
  • For very large folders, turn the grid into a row-grouped virtual list, and keep the list view on TxDataTable's controlled sorting with server-side paging.
  • Show cross-folder search results as a temporary virtual folder, with each item's path.
  • When thumbnails come from a server, fix the tile height and set images to draggable="false"; revoke object URLs on delete, reset, and unmount.
RegionComponentsRole
Path and toolbarTxBreadcrumb, TxDropdownMenu, TxIconButton, TxSearchInput, TxFlatRadio, TxButtonPath, search, view, and upload
Folder treeTxTreeControlled tree; drop tiles to move
QuotaTxProgressBar, TxStatusBadgePlugin usage and quota bars
GridTxIconChip, TxCornerOverlay, TxCheckbox, TxTagThumbnails, badges, and checkboxes
ListTxDataTableSortable list sharing the selection
Context menuTxContextMenu / TxContextMenuItem / TxContextMenuDivider / TxContextMenuSubmenuOne menu for tiles and blanks
Drag-in uploadTxFileUploader, TxToastPanel, TxCardItem, TxProgressBarDrop layer and upload tray
PreviewTxModal, TxMarkdownView, TxImageGallery, TxEmptyState, TxSplitter, TxNoSelectionQuick look and preview pane
Bulk and feedbackTxButton, TxToastPanel, TxSearchEmptyBulk bar, undo, Clear search
Move to…TxModal, TxTreeValid target folders only