From 4981f723c5efbdcb0962a6fb4636304c9a0a4d6f Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Sun, 25 May 2025 22:29:58 +0100
Subject: [PATCH] fix(frontend): add uid for upload components

---
 .../src/app-components/attachment/AttachmentUploader.tsx   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app-components/attachment/AttachmentUploader.tsx b/frontend/src/app-components/attachment/AttachmentUploader.tsx
index fcd3752b..ef5eb377 100644
--- a/frontend/src/app-components/attachment/AttachmentUploader.tsx
+++ b/frontend/src/app-components/attachment/AttachmentUploader.tsx
@@ -17,7 +17,7 @@ import {
   styled,
   Typography,
 } from "@mui/material";
-import { ChangeEvent, DragEvent, FC, useState } from "react";
+import { ChangeEvent, DragEvent, FC, useId, useState } from "react";
 
 import { useUpload } from "@/hooks/crud/useUpload";
 import { useDialogs } from "@/hooks/useDialogs";
@@ -88,6 +88,7 @@ const AttachmentUploader: FC<FileUploadProps> = ({
   const [attachment, setAttachment] = useState<IAttachment | undefined>(
     undefined,
   );
+  const uid = useId();
   const { t } = useTranslate();
   const dialogs = useDialogs();
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
@@ -154,11 +155,11 @@ const AttachmentUploader: FC<FileUploadProps> = ({
           <HiddenInput
             onChange={handleChange}
             accept={accept}
-            id="file-upload"
+            id={`file-upload${uid}`}
             type="file"
           />
           <FileUploadLabel
-            htmlFor="file-upload"
+            htmlFor={`file-upload${uid}`}
             isDragOver={isDragOver}
             onMouseEnter={() => setIsDragOver(true)}
             onMouseLeave={() => setIsDragOver(false)}