diff --git a/src/front/Components/DesignSystem/DragAndDrop/index.tsx b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
index 5f7bc70e..cf40d7e1 100644
--- a/src/front/Components/DesignSystem/DragAndDrop/index.tsx
+++ b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
@@ -22,8 +22,8 @@ type IProps = {
 	defaultFiles?: IDocumentFileWithUid[];
 	onDelete?: (fileUid: string) => Promise<any>;
 	onAddFile?: (file: File) => Promise<any>;
-	onAddToList?: (file: IDocumentFile) => void;
-	onRemoveFromList?: (file: IDocumentFile) => void;
+	name?: string;
+	onChange?: (files: File[]) => void;
 } & (
 	| { onDelete: (fileUid: string) => Promise<any>; onAddFile?: never; defaultFiles: IDocumentFileWithUid[] }
 	| { onDelete?: never; onAddFile: (file: File) => Promise<any>; defaultFiles: IDocumentFileWithUid[] }
@@ -70,7 +70,7 @@ export type IDocumentFileWithUid = IDocumentFileBase & {
 type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid;
 
 export default function DragAndDrop(props: IProps) {
-	const { title, description, defaultFiles, onDelete, onAddFile, onAddToList, onRemoveFromList } = props;
+	const { title, description, defaultFiles, onDelete, onAddFile, name, onChange } = props;
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
 	const [documentFiles, setDocumentFiles] = useState<IDocumentFile[]>([]);
@@ -81,6 +81,8 @@ export default function DragAndDrop(props: IProps) {
 		}
 	}, [defaultFiles]);
 
+	useEffect(() => onChange?.(documentFiles.map((doc) => doc.file).filter((file) => file !== null) as File[]), [documentFiles, onChange]);
+
 	const handleAddFiles = useCallback(
 		(files: File[]) => {
 			files.forEach((file) => {
@@ -97,9 +99,6 @@ export default function DragAndDrop(props: IProps) {
 					}
 
 					return setTimeout(async () => {
-						if (onAddToList) {
-							onAddToList(newDoc);
-						}
 						setDocumentFiles((prevDocs) => prevDocs.map((doc) => (doc.id === newDoc.id ? newDoc : doc)));
 					}, 1000);
 				} catch (error: any) {
@@ -122,9 +121,6 @@ export default function DragAndDrop(props: IProps) {
 
 	const handleRemove = useCallback(
 		(documentFile: IDocumentFile) => {
-			if (onRemoveFromList) {
-				onRemoveFromList(documentFile);
-			}
 			const loadingDoc = { ...documentFile, isLoading: true };
 			setDocumentFiles((prevDocs) => prevDocs.map((doc) => (doc.id === documentFile.id ? loadingDoc : doc)));
 
@@ -210,6 +206,7 @@ export default function DragAndDrop(props: IProps) {
 	function inputFile() {
 		return (
 			<input
+				name={name}
 				ref={fileInputRef}
 				type="file"
 				multiple
diff --git a/src/front/Components/Layouts/Folder/SendDocuments/index.tsx b/src/front/Components/Layouts/Folder/SendDocuments/index.tsx
index 33528ba8..769c0f80 100644
--- a/src/front/Components/Layouts/Folder/SendDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/SendDocuments/index.tsx
@@ -22,32 +22,32 @@ enum EClientSelection {
 	SELECTED_CLIENTS = "selected_clients",
 }
 
-type IDocumentFileBase = {
-	id: string;
-	file: File | null;
-	uid?: string;
-	isLoading?: boolean;
-	error?: string;
-};
+// type IDocumentFileBase = {
+// 	id: string;
+// 	file: File | null;
+// 	uid?: string;
+// 	isLoading?: boolean;
+// 	error?: string;
+// };
 
-export type IDocumentFileWithUid = IDocumentFileBase & {
-	uid: string;
-};
+// export type IDocumentFileWithUid = IDocumentFileBase & {
+// 	uid: string;
+// };
 
-type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid;
+// type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid;
 
 export default function SendDocuments() {
 	const router = useRouter();
 	let { folderUid } = router.query;
 	const [folder, setFolder] = useState<OfficeFolder | null>(null);
 	const [clientSelection, setClientSelection] = useState<EClientSelection | null>(EClientSelection.SELECTED_CLIENTS);
-	const [files, setFiles] = useState<IDocumentFile[]>([]);
 	const [selectedClients, setSelectedClients] = useState<string[]>([]);
+	const [files, setFiles] = useState<File[]>([]);
 
 	const onFormSubmit = useCallback(
 		async (
 			_e: React.FormEvent<HTMLFormElement> | null,
-			_values: {
+			values: {
 				[key: string]: any;
 			},
 			//TODO: when back is done
@@ -57,14 +57,21 @@ export default function SendDocuments() {
 				setSelectedClients(allClientIds);
 			}
 			const formData = new FormData();
+			console.log("files", files);
+
+			// get the files from the input which name is "files"
+			// console.log({ values });
+			// const files: File[] = values["files"];
+			// console.log({ files });
 
 			selectedClients.forEach(async (customer) => {
-				console.log(files[0]?.file);
-
-				if (!files[0]?.file) return;
 				formData.append("customerUid", customer as string);
 				formData.append("folderUid", folderUid as string);
-				formData.append("file", files[0].file as File);
+				if (!files[0]) {
+					console.error("No files to send");
+					return;
+				}
+				formData.append("file", files[0]);
 				const documentNotary = await DocumentsNotary.getInstance().post(formData);
 				console.log(documentNotary);
 			});
@@ -81,22 +88,22 @@ export default function SendDocuments() {
 			// const documentNotary = await DocumentsNotary.getInstance().post(formData);
 			// console.log(documentNotary);
 		},
-		[files, clientSelection, selectedClients],
+		[clientSelection, selectedClients, files],
 	);
 
-	const onAddToList = useCallback((documentFile: IDocumentFile) => {
-		const test = files;
-		test.push(documentFile);
-		setFiles(test);
-	}, []);
+	// const onAddToList = useCallback((documentFile: IDocumentFile) => {
+	// 	const test = files;
+	// 	test.push(documentFile);
+	// 	setFiles(test);
+	// }, []);
 
-	const onRemoveFromList = useCallback((documentFile: IDocumentFile) => {
-		const test = files;
-		const index = test.findIndex((doc) => doc.id === documentFile.id);
-		if (index === -1) return;
-		test.splice(index, 1);
-		setFiles(test);
-	}, []);
+	// const onRemoveFromList = useCallback((documentFile: IDocumentFile) => {
+	// 	const test = files;
+	// 	const index = test.findIndex((doc) => doc.id === documentFile.id);
+	// 	if (index === -1) return;
+	// 	test.splice(index, 1);
+	// 	setFiles(test);
+	// }, []);
 
 	const fetchFolder = useCallback(async () => {
 		Folders.getInstance()
@@ -150,6 +157,10 @@ export default function SendDocuments() {
 		[folderUid],
 	);
 
+	const handleFileChange = useCallback((files: File[]) => {
+		setFiles(files);
+	}, []);
+
 	const clientsOptions = useMemo(() => {
 		if (!folder?.customers) return [];
 		return folder.customers.map((customer) => ({
@@ -195,10 +206,10 @@ export default function SendDocuments() {
 					{clientSelection && (
 						<>
 							<DragAndDrop
+								name="files"
 								title="Glisser ou déposer ou"
 								description="Formats acceptés : PDF, JPG Taille maximale : 5 Mo"
-								onAddToList={onAddToList}
-								onRemoveFromList={onRemoveFromList}
+								onChange={handleFileChange}
 							/>
 
 							<div className={classes["buttons-container"]}>