✨ On change working

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

@@ -3,6 +3,7 @@
 	background-color: white;
 	border: 1px dashed #e7e7e7;
     
+    height: fit-content;
     &[data-drag-over="true"] {
         border: 1px dashed grey;
     }
@@ -48,6 +49,10 @@
 				align-items: center;
 				gap: 8px;
 			}
+
+			.cross{
+				cursor: pointer;
+			}
 		}
 	}
 

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

@@ -15,6 +15,7 @@ type IProps = {
 	title: string;
 	dateAsked: Date;
 	defaultDocuments?: Document[];
+	onChange?: (files: File[]) => void;
 };
 
 type IFile = {
@@ -124,8 +125,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 	private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
 		event.preventDefault();
+		this.setState({
+			isDragOver: false,
+		});
 		const file = event.dataTransfer.files[0];
-		if (!file) return;
+		if (file) this.addFile(file);
+	}
+
+	private addFile(file: File) {
 		this.setState({
 			files: [
 				...this.state.files,
@@ -135,6 +142,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 				},
 			],
 		});
+
+        if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
 	}
 
 	private removeFile(e: any) {
@@ -144,6 +153,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		this.setState({
 			files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)),
 		});
+
+        if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
 	}
 
 	private async onFileChange() {
@@ -152,16 +163,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		if (!files) return;
 		const file = files[0];
 
-		if (!file) return;
-		this.setState({
-			files: [
-				...this.state.files,
-				{
-					index: this.index++,
-					file: file,
-				},
-			],
-		});
+		if (file) this.addFile(file);
 	}
 
 	private addDocument() {