File Upload — Playground
Adjust picker mode, density, and hints while keeping transport state controlled.
variant
mode
size
State
<kui-file-upload acceptLabel="PNG, JPG, or PDF up to 10 MB" [accept]="['image/png', 'image/jpeg', 'application/pdf']" [maxSize]="10 * 1024 * 1024" [maxCount]="3"
[(files)]="files"
(retry)="retryUpload($event)"
/>| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'dropzone' | 'compact' | 'dropzone' | Renders the full drag-and-drop zone or a compact attach button. |
| mode | 'single' | 'multiple' | 'multiple' | Controls whether a new selection replaces or appends to the file list. |
| accept | readonly string[] | undefined | Allowed MIME types. Omit it to accept any file type. |
| acceptLabel | string | undefined | Human-readable format and limit hint shown near the picker. |
| maxSize | number | undefined | Maximum file size in bytes. |
| maxCount | number | undefined | Maximum number of files in multiple mode. |
| size | 'sm' | 'md' | 'lg' | 'md' | Controls row height, thumbnail scale, and trigger density. |
| disabled | boolean | false | Stops drag, click, and keyboard file-picking interactions. |
| [(files)] | readonly KuiUploadFile[] | [] | Controlled file list. Consumers own upload status and progress after picking. |
| (retry) | KuiUploadFile | - | Emits when an errored item retry action is activated. |
| KuiUploadFile.status | 'pending' | 'uploading' | 'success' | 'error' | - | Per-file state written by the component initially and then by the consumer. |
Inputs verified against @kikita-labs/ui v1.6.1 public typings and package docs.