File Upload
Click-to-browse and drag-and-drop file picker with type/size/count validation and a removable file list.
API
All inputs and configuration options for zyra-file-upload.
| Prop | Type | Default | Description |
|---|---|---|---|
multiple | boolean | false | Allows selecting/accumulating more than one file |
accept | string | '' | Comma-separated extensions/MIME patterns, e.g. ".pdf,image/*" |
maxSizeMb | number | null | null | Rejects files larger than this size |
maxFiles | number | null | null | Rejects files beyond this count |
filesChange (output) | File[] | - | Emits the current accepted file list whenever it changes |
rejected (output) | { file: File; reason: 'size' | 'type' | 'count' }[] | - | Emits files that failed validation, with the reason for each |
Tokens
CSS custom properties zyra-file-upload reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Dropzone background--zyra-color-file-upload-bg | var(--zyra-color-surface-inset) | Fill color of the dropzone and each listed file row. |
Dropzone border--zyra-color-file-upload-border | var(--zyra-color-border-color) | Dashed border color of the dropzone, and the border of each file row. |
Text--zyra-color-file-upload-text | var(--zyra-color-foreground) | Primary text color for dropzone copy and file names. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Dropzone is a role="button" with tabindex="0" — Enter/Space opens the file picker
- Each file in the list has a labeled, keyboard-accessible remove button