Add drag and drop support

Refs: #6368

Author: anicyne

packages/components/src/components/input-file/shadow.tsx

@@ -320,6 +320,35 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 		this.controller.componentWillLoad();
 	}
 
+	public componentDidLoad(): void {
+		this._touched = this._touched === true;
+		this.controller.componentWillLoad();
+		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;

packages/themes/default/src/components/input-file.scss

@@ -11,6 +11,10 @@
 		&__filename {
 			color: var(--color-subtle);
 		}
+
+		&--is-dragover {
+			border-color: var(--color-primary) !important;
+		}
 	}
 
 	.kol-button {

packages/themes/ecl/src/ecl-ec/components/input-file.scss

@@ -9,4 +9,10 @@
 			white-space: nowrap;
 		}
 	}
+
+	.kol-input-container {
+		&--is-dragover {
+			border-color: var(--color-blue) !important;
+		}
+	}
 }

packages/themes/ecl/src/ecl-eu/components/input-file.scss

@@ -10,4 +10,10 @@
 			white-space: nowrap;
 		}
 	}
+
+	.kol-input-container {
+		&--is-dragover {
+			border-color: var(--color-blue) !important;
+		}
+	}
 }