`<dj-file-input>`

A form-associated file selector with a button that opens the system file picker and a focusable drop zone.

The component only selects files. It does not upload them or show previews. Selected files are listed with their size and a remove button.

npm install @dojo-ng/file-input

import "@dojo-ng/file-input";

Adding files

Files can arrive in four ways, and all of them go through the same checks:

The file picker.
A drop on the drop zone.
A paste, such as a screenshot, while the drop zone has focus.
The addFiles(files) method, for files your app captured somewhere else, such as a paste in a message body or a drop on a whole pane.

accept filters the picker and drops, by extension, exact MIME type, or type/*.
Without multiple, a new file replaces the current one.
max-size (bytes, per file) rejects a larger file and sets a fileTooLarge validity error, cleared on the next change.
required with no files reports valueMissing.

The form value is one File, or, with multiple, a FormData with one entry per file under name.
files (read-only) is the current selection, and clear() empties it.
dj-change fires with { files } when files are added or removed.

Property	Attribute	Type	Default
`accept`	`accept`	`string`	None
`multiple`	`multiple`	`boolean`	`false`
`required`	`required` reflected	`boolean`	`false`
`maxSize`	`max-size`	`number`	None
`label`	`label`	`string`	None
`name`	`name` reflected	`string`	None
`disabled`	`disabled` reflected	`boolean`	`false`

Event	Description
`dj-change`	`{ files }`

Style these with dj-file-input::part(name).

buttondropzonelistitemremovelabel

Method	Description
`checkValidity(): boolean`
`reportValidity(): boolean`
`focus(options: FocusOptions)`
`clear()`	Remove all selected files (no `dj-change`).
`addFiles(incoming: File[] \| FileList)`	Add files from any source, applying `accept` + `multiple` + `max-size`; appends, or replaces when not `multiple`. Emits `dj-change`. This is the single intake path — the picker, drop, and paste all route through it, and the app can call it to forward files captured elsewhere (e.g. a paste into the compose body or a drop on the whole pane).