Components
File upload
File upload
Styled drop-zone wrapper around a native file input. Posts as part of the surrounding form; supports drag-and-drop; validates max size client-side. Native chrome stays out of sight, consistent across browsers.
Canonical
<koala-file-upload name="document" accept=".pdf,.docx" max-size-mb="10" label="Drop a contract or click to browse" />Drag a file onto the zone, or click to open the native picker. The label updates with the chosen filename; oversize files reject with an inline error.
Variants
Single (image)
accept="image/*"
Multiple
multiple
<koala-file-upload name="attachments" multiple label="Drop one or more files" />States
Default
Dashed outline drop-zone at rest
Dragging
Drag a file over the zone — border and fill flip to primary
Error
Oversize file — inline danger message, selection cleared
All three are the live helper — drag a file across the page to see the dragging highlight, and choose a file anywhere to see the prompt swap to the chosen filename. Hovering the zone dims the fill; the whole zone is one big click target for the native picker.
Props
| Attribute | Values | Notes |
|---|---|---|
| name | String | Required. Form-field name on the hidden input. |
| accept | MIME list | Same syntax as the native attribute. Optional. |
| multiple | Boolean | Allow selecting more than one file. |
| max-size-mb | int | Client-side cap. Server should still enforce it. |
| label | String | Drop-zone prompt. Defaults to "Drop a file or click to browse". |
| id | String | Optional. Defaults to a sanitised version of name. |
Do & don't
Drop-zone with size and accept restrictions:
accept=".pdf,.jpg,.png" max-size-mb="10"
Do
Always set
accept and max-size-mb. Server-side enforcement still runs, but the browser hints help users pick the right file first.
Bare
<input type="file" />
Don't
Don't use the bare native file input. The browser default has no drop-zone affordance and no consistent styling across OSes.