InputFile
Synonyms: Upload, File Uploader, File Picker, File Selector
The input type File creates an input field for uploads, for example. One or more files can be selected.
Construction
Code
<kol-input-file _label="Bild hochladen" _accept="image/png, image/jpeg, application/pdf" _icons='{"right": "codicon codicon-device-camera"}'></kol-input-file>
Events
For the handling of events or callbacks, see
| Event | trigger | Value |
|---|---|---|
focus | Input field is focused | - |
click | Input field is clicked | - |
input | One or more files are selected (corresponds to native input event) | Selected files as FileList |
change | One or more files are selected (corresponds to native change event) | Selected files as FileList |
blur | Input field loses focus | - |
Example
Usage
Use the _accept attribute to specify which file types are allowed for selection. If the attribute is not passed or is passed empty, all file types are permitted. Possible values and further information can be found in the
Best practices
- Make sure to set
idandnamecorrectly so that the data is sent when you submit the form. - Allow only the file types needed for program execution to be uploaded. Failure to restrict the file types that can be uploaded can be a significant security risk.
- Limit the size of files you want to allow for upload.
Accessibility
Keyboard controls
| button | Function |
|---|---|
Tab | Focuses the input field and calls the file selection dialog. |
Links and references
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accept | _accept | Defines which file formats are accepted. | string | undefined | undefined |
_accessKey | _access-key | Defines the key combination that can be used to trigger or focus the component's interactive element. | string | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_hideLabel | _hide-label | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | boolean | undefined | false |
_hideMsg | _hide-msg | Hides the error message but leaves it in the DOM for the input's aria-describedby. | boolean | undefined | false |
_hint | _hint | Defines the hint text. | string | undefined | '' |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; } | undefined |
_id | _id | [DEPRECATED] Will be removed in the next major version. Defines the internal ID of the primary component element. | string | undefined | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot. | string | undefined |
_msg | _msg | Defines the properties for a message rendered as Alert component. | Omit<AlertProps, "_on" | "_hasCloser" | "_label" | "_level" | "_variant"> & { _description: string; } | string | undefined | undefined |
_multiple | _multiple | Makes the input accept multiple inputs. | boolean | undefined | false |
_name | _name | Defines the technical name of an input field. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined | undefined |
_required | _required | Makes the input element required. | boolean | undefined | false |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string | undefined | undefined |
_smartButton | _smart-button | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | undefined | { _label: string; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: "primary" | "secondary" | "normal" | "tertiary" | "danger" | "ghost" | "custom" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; } | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_touched | _touched | Shows if the input was touched by a user. | boolean | undefined | false |
Methods
getValue
getValue() => Promise<FileList | null | undefined>
Returns the current value.
Returns
Type: Promise<FileList | null | undefined>
kolFocus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
reset() => Promise<void>
Resets the component's value.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Die Beschriftung des Eingabefeldes. |
Usage _msg
| Case | _msg-Value |
|---|---|
| No message | undefined |
| Default error message | string |
| Message | {_type: 'success', _description: 'Success message'} |