357-as-a-dev-i-want-the-dropzone-to-be-able-to-receive-folders-to-facilitate-the-import-of-multiple-images

public/locales/en/alertBanner.json

@@ -1,3 +1,6 @@
 {
-    "languageChanged": "The language has change to {{lng}}!"
+    "languageChanged": "The language has change to {{lng}}!",
+    "fileExists": "The file name already exist!",
+    "PdfNotSupported": "Pdf file is not supported yet!",
+    "maxFilesExceeded": "Maximum number of 10 files has been reached!"
 }

public/locales/fr/alertBanner.json

@@ -1,3 +1,6 @@
 {
-    "languageChanged": "La langue a été changée pour {{lng}}!"
+    "languageChanged": "La langue a été changée pour {{lng}}!",
+    "fileExists": "Le fichier a déjà été ajouté!",
+    "PdfNotSupported": "Le fichier PDF n'est pas encore pris en charge!",
+    "maxFilesExceeded": "Le nombre maximum de 10 fichiers a été atteint!"
 }

src/app/__tests__/HomePage.test.tsx

@@ -100,9 +100,45 @@ describe("HomePage Component", () => {
     // Mock file
     const file = new File(["hello"], "hello.png", { type: "image/png" });
 
+    // Create a dataTransfer object
+    interface DataTransferItem {
+      kind: string;
+      type: string;
+      getAsFile: () => File;
+      webkitGetAsEntry: () => {
+        isFile: boolean;
+        file: (callback: (file: File) => void) => void;
+      };
+    }
+
+    interface DataTransfer {
+      items: DataTransferItem[];
+      files: File[];
+    }
+
+    const dataTransfer: DataTransfer = {
+      items: [
+        {
+          kind: 'file',
+          type: file.type,
+          getAsFile: () => file,
+          webkitGetAsEntry: () => ({
+            isFile: true,
+            file: (callback) => {
+              callback(file);
+            },
+          }),
+        },
+      ],
+      files: [file],
+    };
+
     // Find the dropzone and simulate the drop event
     const dropzone = await screen.getByTestId("dropzone");
-    fireEvent.drop(dropzone, { dataTransfer: { files: [file] } });
+
+    fireEvent.drop(dropzone, {
+      dataTransfer: dataTransfer,
+    });
 
     // Check that the file was uploaded and appears in the list.
     const fileElement = await screen.findByTestId("file-element");

src/components/Dropzone.tsx

@@ -5,6 +5,7 @@ import { CloudUpload } from "@mui/icons-material";
 import type { ImageLoadEvent, DropzoneState } from "@/types/types";
 import FileUploaded from "@/classe/File";
 import { useTranslation } from "react-i18next";
+import useAlertStore from "@/stores/alertStore";
 
 /**
  * Props for the Dropzone component.
@@ -33,22 +34,48 @@ const Dropzone: React.FC<DropzoneProps> = ({
   setDropzoneState,
 }) => {
   const theme = useTheme();
-  const { t } = useTranslation("homePage");
+  const { t: tHomePage } = useTranslation("homePage");
+  const { t: tAlertBanner } = useTranslation("alertBanner");
+    const { showAlert } = useAlertStore();
+
+  const allowedImagesExtensions = [".png", ".jpg", ".jpeg"];
 
   function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
   }
 
   async function handleDrop(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
-    const files = event.dataTransfer.files;
-    if (files && files.length > 0) {
-      for (let i = 0; i < files.length; i++) {
-        processFile(files[i]);
+    const items = event.dataTransfer.items;
+    if (items && items.length > 0) {
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i].webkitGetAsEntry();
+        if (item) {
+          traverseFileTree(item);
+        }
       }
     }
   }
 
+  async function traverseFileTree(item: FileSystemEntry) {
+    if (item.isFile) {
+      const fileEntry = item as FileSystemFileEntry;
+      fileEntry.file((file: File) => {
+        if (allowedImagesExtensions.some((ext) => file.name.endsWith(ext))) {
+          processFile(file);
+        }
+      });
+    } else if (item.isDirectory) {
+      const dirEntry = item as FileSystemDirectoryEntry;
+      const dirReader = dirEntry.createReader();
+      dirReader.readEntries((entries: FileSystemEntry[]) => {
+        for (let i = 0; i < entries.length; i++) {
+          traverseFileTree(entries[i]);
+        }
+      });
+    }
+  }
+
   function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
     const files = event.target.files;
     if (files && files.length > 0) {
@@ -59,12 +86,13 @@ const Dropzone: React.FC<DropzoneProps> = ({
   }
 
   async function processFile(file: File) {
+
     const alreadyExists = uploadedFiles.some(
-      (uploadedFile) => uploadedFile.getInfo().name === file.name,
+      (uploadedFile) => uploadedFile.getInfo().name === file.name
     );
 
     if (alreadyExists) {
-      // TODO: Implement error message
+      showAlert(tAlertBanner("fileExists"), "error");
       return;
     }
 
@@ -76,7 +104,7 @@ const Dropzone: React.FC<DropzoneProps> = ({
 
     const detectedType = await FileUploaded.detectType(newFile.getInfo().path);
     if (typeof detectedType === "object" && detectedType.type === "pdf") {
-      // TODO: Handle PDF files
+      showAlert(tAlertBanner("pdfNotSupported"), "info");
     } else {
       setUploadedFiles((prevFiles) => [...prevFiles, newFile]);
     }
@@ -124,7 +152,7 @@ const Dropzone: React.FC<DropzoneProps> = ({
           data-testid="hovered-image"
           component="img"
           src={dropzoneState.imageUrl}
-          alt={t("dropzone.altText.hoveredImageAlt")}
+          alt={tHomePage("altText.hoveredImageAlt")}
           onLoad={handleImageLoad}
           className={`absolute max-w-full max-h-full object-contain ${
             dropzoneState.fillPercentage && dropzoneState.fillPercentage >= 90
@@ -135,24 +163,23 @@ const Dropzone: React.FC<DropzoneProps> = ({
       ) : (
         <Box className="text-center">
           <CloudUpload
-            aria-label={t("dropzone.altText.CloudIconAlt")}
+            aria-label={tHomePage("dropzone.altText.CloudIconAlt")}
             style={{
               color: theme.palette.secondary.main,
               fontSize: "7rem",
             }}
           />
           <Typography variant="h5" color={theme.palette.secondary.main}>
-            <b>{t("dropzone.dragDrop")}</b>
+            <b>{tHomePage("dropzone.dragDrop")}</b>
           </Typography>
           <Typography variant="h5" color={theme.palette.secondary.main}>
-            <b>{t("dropzone.or")}</b>
+            <b>{tHomePage("dropzone.or")}</b>
           </Typography>
           <Button variant="contained" component="label" color="secondary">
-            <b>{t("dropzone.browseFile")}</b>
+            <b>{tHomePage("dropzone.browseFile")}</b>
             <input
               type="file"
-              accept=".png,.jpg,.jpeg,"
-              /*.pdf*/
+              accept=".png,.jpg,.jpeg,.pdf"
               multiple
               hidden
               onChange={handleFileUpload}