Upload
Click or drag to select files; displays the file list and upload progress.
Basic Usage
Basic (select files)
Multiple & Limit
Multiple + max
max limits the maximum number of selectable files; accept filters file types. Files exceeding max are rejected and an oas-exceed event is emitted.
Auto Upload
Auto upload (simulated progress)
With auto-upload, adding a file automatically simulates upload progress; the progress bar reuses oas-progress.
Drag & Drop
Drag & drop upload
Drag files directly into the dashed area and release to add them (multiple supported); the area highlights while dragging. When disabled, the drag shows a not-allowed cursor and drops are ignored.
Picture Wall
list-type controls the list style: list (default, text rows), picture (rows with small thumbnails), picture-card (card thumbnail wall).
picture-card
Picture wall (picture-card)
Image files render thumbnails (URL.createObjectURL); non-image files show a file icon and name. Click a thumbnail to open the preview overlay (close with Esc or by clicking the mask); remove via the top-right ×, and hover shows preview/remove actions.
Remove, preview & max rejection
Picture wall · remove/preview/exceed
A 4th file is rejected by max="3" and triggers oas-exceed with a warning; clicking a thumbnail triggers oas-preview.
picture rows with thumbnails
Rows with thumbnails (picture)
At the max
Reached max (pre-filled with 3)
Pre-filled to max="3"; further selections are rejected via oas-exceed.
Disabled
Disabled
Events
Change events
Listen to oas-change / oas-remove / oas-upload:
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
accept | Accepted file types | string | — |
auto-upload | Auto-simulate upload after adding | boolean | — |
disabled | Disabled | boolean | — |
files | File list (property, File[]) | File[] | [] |
list-type | List style: list (default) / picture (rows with thumbnails) / picture-card (card thumbnail wall) | string | list |
max | Maximum number of files | string | 0 |
multiple | Multiple selection | boolean | — |
Events
| Event | Description |
|---|---|
oas-change | File list change, detail: { files } |
oas-exceed | Files rejected by the max limit, detail: { files, max, total } |
oas-preview | Preview overlay opened, detail: { file, url } |
oas-remove | File removed, detail: { file, index } |
oas-upload | Upload progress, detail: { file, percent, status } |
Keyboard: Enter / Space on the drop zone opens the file picker; remove buttons are focusable; the preview overlay closes with Esc.