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.

<koala-file-upload>

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" />

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.