File Manager
Browse, upload, organize and download files in the shared uploads folder. Scope it to a root sub-folder, filter by type, and switch between grid and list views.


Reach for it when you need:
- Operators attaching evidence to a record
- A shared drawings/SOP folder on a screen
Component name: FileManager · Category: Display
In the palette: Browse, upload, organize and download files in the shared uploads folder. Scope it to a root sub-folder, filter by type (images, video, documents, …), and switch between grid and list views. Shows a clear warning until an admin configures the upload folder.
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
rootFolder | string | "" | The folder (relative to the uploads root) this manager is confined to. Leave empty to use the uploads root itself. Bindable — bind a tag/variable to scope the view per user/asset at runtime. The operator can never navigate above this folder. |
fileFilter | enum | all | Default file-type filter. The operator can change it at runtime from the toolbar. Options: all · images · video · audio · documents · pdf · archives · custom. |
customExtensions | string | "" | When fileFilter is 'Custom', the comma/space-separated extensions to allow (e.g. "csv, json, log"). Leading dots and case are ignored. |
selectionMode | enum | none | none = click opens/downloads (no selection emitted). single = click selects one item, double-click opens. multiple = click toggles selection (checkboxes), double-click opens. Options: none · single · multiple. |
view | enum | grid | Initial layout: a thumbnail grid or a dense list. The operator can toggle it at runtime. Options: grid · list. |
showSearch | boolean | true | Show the name search box. |
showFolderTree | boolean | true | Show the folder-tree sidebar for quick navigation (hidden automatically on narrow widths). |
readOnly | boolean | false | Browse & download only — hides all upload/delete/rename/new-folder actions. Overrides the individual allow* toggles. |
permissions | object | {"upload":true,"delete":true,"createFolder":true,"rename":tr… (truncated) | Which write actions the widget offers. In LiveView these also require the operator's write-level (a read-only operator sees none). |
↳ permissions.upload | boolean | true | Allow uploading files (drag-drop + button). |
↳ permissions.delete | boolean | true | Allow deleting files and folders. |
↳ permissions.createFolder | boolean | true | Allow creating new folders. |
↳ permissions.rename | boolean | true | Allow renaming files and folders. |
maxUploadMB | number | 25 | Maximum size per uploaded file, in MB. This can only TIGHTEN the platform limit set in Settings → Storage — an administrator's global cap always wins, and the server enforces it regardless. |
selectedItem | object | {} | Output: the (most recently) selected item as { name, path, type, dateModified, ref, url }. Bind {{ <name>.selectedItem.ref }} into a PDF Viewer / Image / 3D asset prop to show the picked file ('ref' is an upload:// reference that works in the Designer and in LiveView); 'url' is the direct link and 'path' the folder path. |
selectedItems | array | [] | Output: all selected items as an array of { name, path, type, dateModified, ref, url } (single mode holds 0–1). |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
fileSelect | File select | File | The item, under item. |
selectionChange | Selection change | File | The current selection. |
fileOpen | File open | File | The opened file, under file. |
folderOpen | Folder open | File | The opened folder, under folder. |
fileUpload | File uploaded | File | The uploaded file, under file. |
fileDelete | File deleted | File | The deleted file, under file. |
fileRename | File renamed | File | The rename, under rename. |
folderCreate | Folder created | File | The created folder, under folder. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
It shows a clear warning until an administrator configures the upload folder in Settings → Storage. Scope rootFolder — and bind it — so each area or user sees only their own sub-tree; the operator can never navigate above it.
A toolbar that fits narrow spaces Changed in 1.0.8
When the widget is narrow — in a small grid cell, a sidebar or on a phone — its toolbar shrinks to fit rather than spilling over. It goes by the widget's own width, not the screen's, so a small widget on a large monitor shrinks too. First the type filter becomes an icon and New folder, Upload and Refresh move into a More menu, with the same permission checks. Then the search box collapses to an icon that opens it — and stays open while a search is filtering the list. Nothing is taken away: every control is still there, and a shortened control keeps its full name for screen readers.
The folder tree now hides when the widget is narrow, as its setting always said, rather than when the browser window is. Changed in 1.0.8