File Uploader

Drag-drop zone + click-to-browse + uploaded-files list. The component is presentational — it holds selected File objects and renders rows with progress bars and remove controls. The consumer drives actual uploads (XHR/fetch) and calls setProgress(id, pct), markDone(id), markError(id, msg) to update the UI.

a11y (built in): the dropzone is a keyboard-operable button — the controller adds role=button and tabindex=0 when the markup omits them, Enter/Space opens the file picker, and the real <input type="file"> stays in the DOM with its author-supplied aria-label. Every file renders as an <li> whose controls are named per file: a native <progress> labelled Uploading {name} and a remove button labelled Remove {name}; rejection reasons are written into the row as text, never signalled by colour alone. There is no live region — announcing "3 files added" after a drop is the consumer's job.

Usage: <div class="lb-uploader" data-lb-uploader data-lb-accept="image/*" data-lb-max-size="5242880" data-lb-max-files="5"> wrapping .lb-uploader__dropzone (with hidden .lb-uploader__input) + <ul class="lb-uploader__files">. Events: lb-file-added, lb-file-removed, lb-file-error. API: el._lbUploader.getFiles() / .setProgress(id, pct) / .markDone(id) / .markError(id, msg) / .clear().

Default — multiple files, no constraints

Drag one or several files onto the zone, or click to browse. This demo simulates a fake upload (2s per file) after each file is added, so you can see the progress bar flow and the done state.

Constrained — images only, max 2 MB, max 3 files

Rejection reasons are shown inline on the file row (wrong type / too large / count exceeded). Consumer also receives lb-file-error events.

Single file — replaces on new pick

Single-file mode is the absence of both data-lb-multiple on the wrapper and native multiple on the input — either one turns multi-file mode on. Picking a new file replaces the previous one.

Compact variant — inline for settings rows

Smaller footprint with icon + text side-by-side, tighter padding.

Disabled

Add --disabled to the dropzone when uploads shouldn't be accepted (e.g. form is saving, user has hit their quota).