File Upload — Playground
Adjust picker mode, density, and hints while keeping transport state controlled.
variant
mode
size
accept
messages
State
<kui-file-upload
[(files)]="files"
(retry)="retryUpload($event)"
/>File upload events
- No events yet.
| 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. |
| messages | Partial<KuiFileUploadMessages> | undefined | undefined | Per-instance text overrides: prompt, buttons, statuses and errors. Sizes and percentages are formatted with the locale (2.5 MB, 340 kB). They win over scoped and root messages. |
| KuiUploadFile.errorKind | 'type' | 'size' | - | Set by the component when client-side validation rejects a file; the displayed text then follows the active messages. Omit it for errors you set yourself. |
| KuiFileUploadOptions | interface | - | Shape of defaults.fileUpload: size, variant, mode and removeIcon (takes precedence over defaults.icons.remove). |
Inputs verified against @kikita-labs/ui v2.0.0 public typings and package docs.