Forms

`<kern-file-input>`

File picker with drop zone (firmware, configuration import), form-associated. Checks accept and max-size; rejected files are named in the message and not added. The chosen files are listed with size and ×; with multiple new files are added, otherwise they replace the previous one. The form gets the files under name.

Examples

Firmware upload

A drop zone with a button. accept and max-size are checked; rejected files are named in the message and not added. A new file replaces the previous one; × removes it. The form receives the file under name.

kernChange → …

<div style="display:grid;gap:16px;max-width:420px"> <kern-file-input name="firmware" label="Firmware file" accept=".zip,.bin" max-size="16MB" hint=".zip or .bin, max. 16 MB" required label-drop="or drop it here" locale="en"></kern-file-input> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div>

root.querySelector('kern-file-input').addEventListener('kernChange', (e) => { root.querySelector('output').textContent = 'kernChange → ' + (e.detail.files.map((f) => `${f.name} (${f.size} B)`).join(', ') || 'none'); });

Several files

With multiple, new files are added to the list instead of replacing it. Set files = [] to clear the list from script.

Clear backups

<div style="display:grid;gap:12px;max-width:420px"> <kern-file-input label="Configuration backups" accept=".json" multiple max-size="500KB" label-drop="or drop them here"></kern-file-input> <kern-file-input label="Certificate" accept=".pem,.crt" disabled hint="Only with MQTT over TLS"></kern-file-input> <kern-button size="sm" variant="ghost" style="justify-self:start">Clear backups</kern-button> </div>

const input = root.querySelector('kern-file-input'); root.querySelector('kern-button').addEventListener('click', () => (input.files = []));

Properties

accept

string | undefined

Like the native attribute: .bin,.json, image/*, application/pdf.

disabled

reflects

default false

boolean

error

string | undefined

files

mutable

default []

File[]

The chosen files; set [] to clear.

hint

string | undefined

label

string | undefined

labelChooseattribute label-choose · default Choose file · de Datei wählen

string | undefined

labelChooseMultipleattribute label-choose-multiple · default Choose files · de Dateien wählen

string | undefined

labelDropattribute label-drop · default or drop here · de oder hierher ziehen

string | undefined

labelRemoveattribute label-remove · default Remove {name} · de {name} entfernen

string | undefined

{name} is replaced.

labelTooLargeattribute label-too-large · default “{name}” is larger than {max}. · de «{name}» ist grösser als {max}.

string | undefined

{name} and {max} are replaced.

labelWrongTypeattribute label-wrong-type · default “{name}” is not an allowed file type. · de «{name}» hat keinen erlaubten Dateityp.

string | undefined

{name} is replaced.

locale

string | undefined

BCP 47 locale for sizes; defaults to <html lang>, then the browser language.

maxSizeattribute max-size

number | string | undefined

Largest file, in bytes or as "16MB", "500KB".

multipledefault false

boolean

name

string | undefined

requireddefault false

boolean

Events

kernChange

CustomEvent<{ files: File[]; }>

When files were added or removed.

Methods

addFiles()

addFiles(list: FileList | File[]) => Promise<void>

Check and add files (also used for drops).

open()

open() => Promise<void>

Opens the file dialog.

CSS parts

dropzone

The drop zone