Zum Hauptinhalt springen

InputFile

Synonyme: Upload, File Uploader, File Picker, File Selector

Der Input-Typ File erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.

Konstruktion

Code

<kol-input-file _label="Bild hochladen" _accept="image/png, image/jpeg, application/pdf" _icons='{"right": "codicon codicon-device-camera"}'></kol-input-file>

Events

Events der Komponente können über eine _on-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
},
// ...
};
EventAuslöserValue
onFocusElement wird fokussiert-
onClickElement wird angeklickt-
onInputEine oder mehrere Dateien werden ausgewählt (entspricht nativem input-Event)Ausgwählte Dateien als FileList
onChangeEine oder mehrere Dateien werden ausgewählt (entspricht nativem change-Event)Ausgwählte Dateien als FileList
onBlurElement verliert Fokus-

Beispiel

Verwendung

Geben Sie über das Attribut _accept an, welche Dateitypen zur Auswahl erlaubt sind. Wird das Attribut nicht oder leer übergeben, sind alle Dateitypen erlaubt. Mögliche Werte und weitere Informationen erhalten Sie im .

Best practices

  • Achten sie darauf id und name korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
  • Lassen Sie nur die Dateitypen zum Upload zu, die für die Programmausführung benötigt werden. Eine fehlende Einschränkung der hochladbaren Dateitypen kann ein erhebliches Sicherheitsrisiko sein.
  • Begrenzen Sie die Größe der Dateien, die Sie zum Upload zulassen möchten.

Barrierefreiheit

Tastatursteuerung

TasteFunktion
TabFokussiert das Eingabefeld und ruft den Dateiauswahldialog auf.

Properties

PropertyAttributeDescriptionTypeDefault
_accept_acceptDefines which file formats are accepted.string | undefinedundefined
_accessKey_access-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_alert_alertDefines whether the screen-readers should read out the notification.boolean | undefinedtrue
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_error_error[DEPRECATED] Will be removed in v3. Use msg instead.

Defines the error message text.
string | undefinedundefined
_hideError_hide-errorHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hideLabel_hide-labelHides 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 | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines 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.stringundefined
_msg--Defines the properties for a message rendered as Alert component.undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: "default" | "info" | "success" | "warning" | "error" | undefined; _variant?: "card" | "msg" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }undefined
_multiple_multipleMakes the input accept multiple inputs.boolean | undefinedfalse
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefinedundefined
_required_requiredMakes the input element required.boolean | undefinedfalse
_smartButton_smart-buttonAllows to add a button with an arbitrary action within the element (_hide-label only).string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean | undefined; _role?: "button" | "link" | "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; _name?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _accessKey?: string | undefined; }undefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_value_valueDefines the value of the input.string | undefinedundefined

Methods

focus

focus() => Promise<void>

[DEPRECATED] Use kolFocus instead.

Returns

Type: Promise<void>

getValue() => Promise<FileList | null | undefined>

Returns

Type: Promise<FileList | null | undefined>

kolFocus() => Promise<void>

Returns

Type: Promise<void>

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

Beispiel ansehen

Live-Editor

Beispiele