diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
index 12bf929f06..a605215201 100644
--- a/packages/components/src/components/input-file/shadow.tsx
+++ b/packages/components/src/components/input-file/shadow.tsx
@@ -25,6 +25,8 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
import { InputFileController } from './controller';
+import { translate } from '../../i18n';
+import { KolButtonWcTag } from '../../core/component-names';
/**
* @slot - Die Beschriftung des Eingabefeldes.
@@ -93,7 +95,9 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
return (
+ {this.filename}
+
);
@@ -204,6 +208,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
*/
@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;
+ @State() private filename: string = translate('kol-filename-text');
@State() public state: InputFileStates = {
_hideMsg: false,
_id: `id-${nonce()}`,
@@ -315,13 +320,43 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
this.controller.componentWillLoad();
}
+ public componentDidLoad(): void {
+ const container = this.inputRef?.parentElement?.parentElement;
+ container?.addEventListener('dragover', this.onDragOver);
+ container?.addEventListener('dragleave', this.onDragLeave);
+ container?.addEventListener('drop', this.onDrop);
+ }
+
+ private onDragOver = (event: DragEvent): void => {
+ event.preventDefault();
+ this.inputRef?.parentElement?.parentElement?.classList.add('kol-input-container--is-dragover');
+ };
+
+ private onDragLeave = (): void => {
+ this.inputRef?.parentElement?.parentElement?.classList.remove('kol-input-container--is-dragover');
+ };
+
+ private onDrop = (event: DragEvent): void => {
+ event.preventDefault();
+ this.inputRef?.parentElement?.parentElement?.classList.remove('kol-input-container--is-dragover');
+ if (event.dataTransfer?.files.length) {
+ const files = event.dataTransfer.files;
+ this.filename = Array.from(files)
+ .map((file) => file.name)
+ .join(', ');
+ this.controller.setFormAssociatedValue(files);
+ }
+ };
private onChange = (event: Event): void => {
if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
const value = this.inputRef.files;
+ this.filename = value?.length
+ ? Array.from(value)
+ .map((file) => file.name)
+ .join(', ')
+ : translate('kol-filename-text');
this.controller.onFacade.onChange(event, value);
-
- // Static form handling
this.controller.setFormAssociatedValue(value);
}
};
diff --git a/packages/components/src/components/input-file/style.scss b/packages/components/src/components/input-file/style.scss
index 6320d2b279..ca949f9415 100644
--- a/packages/components/src/components/input-file/style.scss
+++ b/packages/components/src/components/input-file/style.scss
@@ -13,5 +13,35 @@
@layer kol-component {
.kol-input {
padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ }
+
+ .kol-input-container {
+ $root: &;
+ padding: 0 0 0 rem(8) !important;
+
+ &__container {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ height: var(--a11y-min-size);
+ }
+
+ &__filename {
+ flex-grow: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-left: rem(4);
+ }
+
+ &:has(> #{$root}__adornment--start):has(> #{$root}__adornment--end) {
+ grid-template-columns: auto 1fr;
+ }
}
}
diff --git a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
index 8d67d7e52b..9f494ace3b 100644
--- a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
@@ -15,7 +15,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -38,7 +42,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -61,7 +69,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -84,7 +96,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -113,7 +129,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
+
+ kol-filename-text
+
+
@@ -142,7 +162,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
+
+ kol-filename-text
+
+
@@ -167,7 +191,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho