✨ Drag n drop working

src/front/Components/DesignSystem/DepositDocument/classes.module.scss

@@ -2,6 +2,11 @@
 	padding: 24px;
 	background-color: white;
 	border: 1px dashed #e7e7e7;
+    
+    &[data-drag-over="true"] {
+        border: 1px dashed grey;
+    }
+
 	.top-container {
 		display: flex;
 		align-items: center;
@@ -37,7 +42,7 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            
+
 			.left-part {
 				display: flex;
 				align-items: center;

src/front/Components/DesignSystem/DepositDocument/index.tsx

@@ -24,6 +24,7 @@ type IFile = {
 
 type IState = {
 	files: IFile[];
+	isDragOver: boolean;
 };
 
 export default class DepositDocument extends React.Component<IProps, IState> {
@@ -35,16 +36,25 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 		this.state = {
 			files: [],
+			isDragOver: false,
 		};
 
 		this.addDocument = this.addDocument.bind(this);
 		this.onFileChange = this.onFileChange.bind(this);
 		this.removeFile = this.removeFile.bind(this);
+        this.onDragOver = this.onDragOver.bind(this);
+        this.onDragDrop = this.onDragDrop.bind(this);
+        this.onDragLeave = this.onDragLeave.bind(this);
 	}
 
 	public override render(): JSX.Element {
 		return (
-			<div className={classes["root"]}>
+			<div
+				className={classes["root"]}
+				onDragOver={this.onDragOver}
+				onDrop={this.onDragDrop}
+				onDragLeave={this.onDragLeave}
+				data-drag-over={this.state.isDragOver.toString()}>
 				<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
 				<div className={classes["top-container"]}>
 					<div className={classes["left"]}>
@@ -96,6 +106,37 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		);
 	}
 
+    private onDragOver(event: React.DragEvent<HTMLDivElement>) {
+		if (!this.state.isDragOver) {
+			this.setState({
+				isDragOver: true,
+			});
+		}
+		event.preventDefault();
+	}
+
+	private onDragLeave(event: React.DragEvent<HTMLDivElement>) {
+		this.setState({
+			isDragOver: false,
+		});
+		event.preventDefault();
+	}
+
+	private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
+		event.preventDefault();
+		const file = event.dataTransfer.files[0];
+		if (!file) return;
+		this.setState({
+			files: [
+				...this.state.files,
+				{
+					index: this.index++,
+					file: file,
+				},
+			],
+		});
+	}
+
 	private removeFile(e: any) {
 		const image = e.target as HTMLElement;
 		const indexToRemove = image.getAttribute("data-file");