File Upload

Form-associated drop zone with drag & drop, browse, size validation, and a removable file list. A Lit Web Component migrated from the Angular esa-file-upload.

Inherited wc import '@esa/ecology/esa-file-upload';

Preview

<esa-file-upload label="Upload a document"></esa-file-upload>

States

Allow multiple files with multiple + accept, cap each file with max-size-mb, or disable the zone entirely.

<esa-file-upload label="Upload images" multiple accept="image/*"></esa-file-upload>
<esa-file-upload label="Max 2 MB" max-size-mb="2"></esa-file-upload>
<esa-file-upload label="Upload disabled" disabled></esa-file-upload>

API

Prop	Type	Default	Description
`label`	`string`	`'Upload files'`	Prompt text inside the drop zone.
`accept`	`string`	`''`	Native accept filter (e.g. image/*, .pdf).
`multiple`	`boolean`	`false`	Allow selecting more than one file.
`max-size-mb`	`number`	`10`	Per-file size limit in MB. Oversized files are rejected inline. Property: `maxSizeMb`.
`disabled`	`boolean`	`false`	Disables the drop zone and browse (reflected attribute).
`name`	`string`	`'files'`	FormData field name used when submitting.

Events

Event	Type	Default	Description
`change`	`CustomEvent<{ files: File[] }>`	—	Fired when the file list changes (add or remove). Composed and bubbles.

Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

(change)="onChange($event.detail)"

File Upload

Preview

States

API

Events

Accessibility