All components (244)

File explorer

Management · FileManager · .amset-explorer

What it is and when to use it

A file explorer: path, search, list or grid, sort, multiple selection, new folder, rename, move, delete and upload.

When to use it

A client's documents, a case's attachments or a team's shared folder.
entries is what the open folder holds and path the route to it; onOpen enters a folder or opens a file, and onNavigate goes up the path.
Each action has its function (onCreateFolder, onRename, onMove, onDelete, onUpload, onDownload): without it, its button does not appear. If the function fails, it says so and the selection is kept.
Moving is done with "Move to" or by dragging onto a folder; uploading, with the button or by dropping files on it.

When not to

A list of attachments without folders: FileList. Only uploading files: FileUpload or Uploader.
Where the files live, who can touch them and their versions are the application's job.

Keyboard: everything is native buttons and checkboxes; when renaming or creating, Enter saves and Escape cancels. The list headers sort with Enter or Space.

Accessibility: it is a named region; each header carries its aria-sort, each checkbox and button the name of its entry, and creating, moving, deleting and uploading are announced.

Fine appearance: --amset-explorer-gap, --amset-explorer-radius, --amset-explorer-tile (minimum width of a grid tile) and --amset-explorer-badge.

What it looks like

<FileManager
  label="Shop documents"
  entries={archivos}
  path={ruta}
  onNavigate={irA}
  onOpen={abrir}
  onCreateFolder={crearCarpeta}
  onRename={renombrar}
  onDelete={borrar}
  onUploadFile={subirUno}
  maxSize={5_000_000}
  rejectDuplicates
/>

Props

Import it with import { FileManager } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`entries`required	`readonly FileEntry[]`	What the open folder holds.
`label`required	`string`	Which explorer it is («Client documents»). Required.
`onOpen`required	`(entry: FileEntry) => void`	Open an entry: enter the folder, or show or download the file.
`accept`	`string`	The types accepted when uploading, like the `accept` of an `<input type="file">`.
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultView`	`FileManagerView`	—
`details`	`boolean`	The details panel on the right: name, type, size and date of what is chosen, with its thumbnail if it has one. Not by default.
`hasMore`	`boolean`	There are more entries on the server than those in `entries`: with this and `onLoadMore` the “Load more” button shows. Search and sort only look at what is loaded.
`loadFolders`	`(key: string) => Promise<readonly TreeNode[]>`	With a lazily loaded tree: asks for the children of a folder the first time it is opened.
`loading`	`boolean`	—
`maxSize`	`number`	The maximum size of a file when uploading, in bytes. What exceeds it is not uploaded and the reason is shown.
`onCreateFolder`	`(name: string) => void \| Promise<void>`	—
`onDelete`	`(ids: readonly string[]) => void \| FileBatchOutcome \| Promise<void \| FileBatchOutcome>`	Delete the selection, with confirmation. If only part is deleted, return `failed` with what was not.
`onDownload`	`(entry: FileEntry) => void`	—
`onLoadMore`	`() => void \| Promise<void>`	—
`onMove`	`(ids: readonly string[], folder: string) => void \| FileBatchOutcome \| Promise<void \| FileBatchOutcome>`	Move the selection to a folder: one in this folder or one in the path. Also by dragging onto a folder. If only part is moved, return `failed` with what was not.
`onNavigate`	`(key: string) => void`	Go to a folder in the path.
`onRename`	`(id: string, name: string) => void \| Promise<void>`	—
`onUpload`	`(files: readonly File[], onProgress: ReportProgress) => void \| Promise<void>`	Upload files to the open folder, with the button or by dropping them on it, all in one call and with a single bar.
`onUploadFile`	`UploadFileHandler`	Upload the files one by one: each shows in a list with its bar, can be cancelled (the signal fires) and, if it fails, retried or removed. If present, it takes over from `onUpload`.
`path`	`readonly Crumb[]`	Where you are, from the root to the open folder. The last crumb is the current folder.
`rejectDuplicates`	`boolean`	Do not upload a file with the same name as something in the folder (case-insensitive). By default, it is uploaded.
`renderPreview`	`(entry: FileEntry) => ReactNode`	What is shown in the details panel instead of the thumbnail (a PDF viewer, a player).
`tree`	`readonly TreeNode[]`	The folder tree on the left: choosing one opens it (calls `onNavigate` with its key). The marked folder is the last one of `path`. Without this, there is no tree.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-explorer-gap`	`var(--amset-space-3)`
`--amset-explorer-radius`	`var(--amset-radius-lg)`
`--amset-explorer-tile`	`10rem`
`--amset-explorer-badge`	`2rem`

How to change it

.amset-explorer {
  --amset-explorer-gap: ...;
  --amset-explorer-radius: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech:

				Actions
		Folder
		2.5 MB
		86 kB