Files

The file manager is the window onto files your users already know: a folder tree, a path you click back along, details or tiles, sorting, search and a preview. They make folders, rename in place, delete, cut, copy and paste, drag files between folders, drop files from the desktop to upload them, and download — with the keyboard as well as the mouse, and a menu on the right button.

The files stay where you keep them. Point it at your own server with a small JSON convention, give it the files you have in the page, or hand it a provider of your own for S3, a CMS or a database: an object with a list method and whichever of the others you support. Binarymission hosts nothing. Every action is announced to the page before it happens, so a rule of yours can refuse it or do it another way.

A team's shared files

Projects, photos, notes and an archive. Double-click a folder to open it; drag files onto a folder, the tree or the path to move them (hold Ctrl to copy); drop files from your desktop to upload them; F2 renames; right-click for the menu. The contracts are read-only, and the page will not let anything in Archive be deleted.

Keyboard: the arrow keys move, Enter opens, Backspace goes up, F2 renames, Delete deletes, Ctrl+C, X and V copy, cut and paste, Shift+F10 opens the menu, and typing a name's first letters jumps to it.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-file-manager id="fs-team" label="Team files" root-label="Team" locale="en-GB" style="inline-size: 100%; --bmx-file-manager-height: min(34rem, 120vw)"></bmx-file-manager>

On your own server

This one talks to a provider of the page's own, which answers a third of a second late the way a real server would; the log shows every call it gets. Search looks in every folder. Point url at your server instead and the file manager speaks the convention below; nothing goes anywhere else.

Calls to the provider appear here.

<bmx-file-manager url="/api/files"></bmx-file-manager>

GET  /api/files?path=/Projects              → [{ "name", "path", "kind", "size", "modified" }, ...]
GET  /api/files/content?path=/a/b.pdf       → the file
GET  /api/files/search?q=plan&path=/        → entries
POST /api/files/folder  { "parent", "name" }
POST /api/files/rename  { "path", "name" }
POST /api/files/delete  { "paths" }
POST /api/files/move    { "paths", "target" }
POST /api/files/copy    { "paths", "target" }
POST /api/files/upload?path=/a              multipart, field "file"

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-file-manager id="fs-server" label="Files on the server" root-label="Server" view="details" locale="en-GB" style="inline-size: 100%; --bmx-file-manager-height: min(26rem, 110vw)"></bmx-file-manager>

Choosing a file for a form

Read-only and as tiles, the file manager is a picker: the page takes the file chosen and puts it in a form instead of opening it. Nothing here can be changed.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-file-manager id="fs-picker" readonly view="tiles" show-tree="false" selectable="single" label="Brand assets" root-label="Brand assets" locale="en-GB" style="inline-size: 100%; --bmx-file-manager-height: min(22rem, 110vw)"></bmx-file-manager>
<bmx-input id="fs-attachment" label="Attachment" readonly placeholder="Choose a file above" style="flex: 1 1 16rem"></bmx-input>

Fifty thousand files in a folder

A camera's worth of photos in one folder. Only the rows in view are drawn, so it scrolls smoothly; sort by any column, or type in the search box to filter as you type.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-file-manager id="fs-large" show-tree="false" show-preview="false" label="Photo library" root-label="Photos" sort-by="modified" sort-descending locale="en-GB" style="inline-size: 100%; --bmx-file-manager-height: min(26rem, 110vw)"></bmx-file-manager>