file-selekt

Uploads — files, images, the editor
Favorite projects
Manage favorites
Notifications
Nothing new yet.
Avatar
Andrei
andrei@example.com
Administrator
Quick settings
Profile Settings

Files — single, multiple, dropzone (live, mock)

One file; uploads on pick.
Multiple files; each uploads on pick.
Drag & drop surface with constraints: documents/images only, max 2 MB each, max 5 files — the lib enforces and explains them.

Images — framed preview, crop editor, readonly

mode="image": framed thumbnail preview, no editing.
mode="image-editor" + shape="circle": crop/zoom BEFORE upload.
Square shape + a fixed aspect for logos/covers.
file-selekt-readonly: shows the stored value, no picking.

Gallery — reorder by drag, cover + captions

An ORDERED image set: drag to reorder, per-image crop, file-selekt-cover marks the cover, file-selekt-captions adds a caption per image — the order/cover/captions all live in the form value.

The rules

  • A real input[type=file] + the file-selekt attribute — the lib owns pick/drop, progress, previews and the upload; the form field ends up carrying the file ID(s), so former saves them like any value.
  • Picking the mode: plain (single/multiple) for a few attachments; dropzone when users bring MANY files or constraints matter (accept/max-size/max-files); image for a framed preview; image-editor (+ shape/aspect) for avatars/logos — users crop BEFORE upload, never ship raw camera files; gallery when the ORDER of an image set is content (cover/captions only when they mean something); readonly to display a stored file.
  • In a REAL app you do not set an endpoint — the default is the framework files machinery, and file-selekt-param-scope stamps ownership (user/company/space) at upload; the mock endpoint here only makes the demo self-contained.
  • Access to uploaded files is the delivery gate's job (private files) — the client never decides visibility.
  • Docs: templates/app/docs/libs/file-selekt.md; every mode against the real dev endpoints: /tests/file-selekt.