Merge pull request #1762 from dxc-technology/Mil4n0r/duplicate-file_inputs-fix

Updates FileInput component logic to prevent duplicates

Author: GomezIvann

lib/src/file-input/FileInput.test.js

@@ -125,6 +125,41 @@ describe("FileInput component tests", () => {
     });
   });
 
+  test("Renders non-duplicated items passed in value when multiple file input", async () => {
+    const callbackFile = jest.fn();
+    const { getByLabelText, getByText } = render(
+      <DxcFileInput
+        label="File input label"
+        helperText="File input helper text"
+        value={allFiles}
+        callbackFile={callbackFile}
+      />
+    );
+    await waitFor(() => {
+      expect(getByText("file1.png")).toBeTruthy();
+      expect(getByText("file2.txt")).toBeTruthy();
+      expect(getByText("Error message")).toBeTruthy();
+      const inputFile = getByLabelText("File input label", { hidden: true });
+      fireEvent.change(inputFile, { target: { files: [file1] } });
+      expect(callbackFile).toHaveBeenCalledWith([
+        {
+          file: file1,
+          preview: "data:image/png;base64,ZmlsZTE=",
+        },
+        {
+          error: "Error message",
+          file: file2,
+          preview: (
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path fill="none" d="M0 0h24v24H0V0z" />
+              <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z" />
+            </svg>
+          ),
+        },
+      ]);
+    });
+  });
+
   test("Renders file items when single file input", async () => {
     const callbackFile = jest.fn();
     const { getByText } = render(

lib/src/file-input/FileInput.tsx

@@ -5,7 +5,7 @@ import { spaces } from "../common/variables";
 import useTheme from "../useTheme";
 import useTranslatedLabels from "../useTranslatedLabels";
 import DxcButton from "../button/Button";
-import FileInputPropsType, { RefType } from "./types";
+import FileInputPropsType, { FileData, RefType } from "./types";
 import FileItem from "./FileItem";
 
 const audioIcon = (
@@ -29,20 +29,31 @@ const fileIcon = (
   </svg>
 );
 
-const getFilePreview = (file) => {
+const getFilePreview = async (file: File): Promise<string | React.JSX.Element> => {
   if (file.type.includes("video")) return videoIcon;
   else if (file.type.includes("audio")) return audioIcon;
-  else if (file.type.includes("image"))
-    return new Promise((resolve) => {
+  else if (file.type.includes("image")) {
+    return new Promise<string>((resolve) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = (e) => {
-        resolve(e.target.result);
+        resolve(e.target.result as string);
       };
     });
-  else return fileIcon;
+  } else return fileIcon;
 };
 
+const isFileIncluded = (file: FileData, fileList: FileData[]) => {
+  const fileListInfo = fileList.map((existingFile) => existingFile.file);
+  return fileListInfo.some(({ name, size, type, lastModified, webkitRelativePath }) =>
+    name === file.file.name &&
+    size === file.file.size &&
+    type === file.file.type &&
+    lastModified === file.file.lastModified &&
+    webkitRelativePath === file.file.webkitRelativePath
+  )
+}
+
 const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
   (
     {
@@ -66,38 +77,34 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
     ref
   ): JSX.Element => {
     const [isDragging, setIsDragging] = useState(false);
-    const [files, setFiles] = useState([]);
+    const [files, setFiles] = useState<FileData[]>([]);
     const [fileInputId] = useState(`file-input-${uuidv4()}`);
 
     const colorsTheme = useTheme();
     const translatedLabels = useTranslatedLabels();
 
-    const checkFileSize = (file) => {
+    const checkFileSize = (file: File) => {
       if (file.size < minSize) return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;
       else if (file.size > maxSize) return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
     };
 
-    const getFilesToAdd = async (selectedFiles) => {
+    const getFilesToAdd = async (selectedFiles: File[]) => {
       const filesToAdd = await Promise.all(selectedFiles.map((selectedFile) => getFilePreview(selectedFile))).then(
-        (previews) =>
+        (previews: string[]) =>
           selectedFiles.map((file, index) => {
             const fileInfo = { file, error: checkFileSize(file), preview: previews[index] };
             return fileInfo;
           })
       );
-      return filesToAdd;
+      return filesToAdd.filter(
+        file => !isFileIncluded(file, files)
+      )
     };
 
-    const addFile = async (selectedFiles) => {
-      if (multiple) {
-        const filesToAdd = await getFilesToAdd(selectedFiles);
-        const finalFiles = [...files, ...filesToAdd];
-        callbackFile?.(finalFiles);
-      } else {
-        const fileToAdd =
-          selectedFiles.length === 1 ? await getFilesToAdd(selectedFiles) : await getFilesToAdd([selectedFiles[0]]);
-        callbackFile?.(fileToAdd);
-      }
+    const addFile = async (selectedFiles: File[]) => {
+      const filesToAdd = await getFilesToAdd(multiple ? selectedFiles : selectedFiles.length === 1 ? selectedFiles : [selectedFiles[0]]);
+      const finalFiles = multiple ? [...files, ...filesToAdd] : filesToAdd;
+      callbackFile?.(finalFiles);
     };
 
     const selectFiles = (e) => {
@@ -157,7 +164,7 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
                 return { ...file, preview };
               }
             })
-          );
+          ) as FileData[];
           setFiles(valueFiles);
         }
       };

lib/src/file-input/types.ts

@@ -5,7 +5,7 @@ type Margin = {
   left?: Space;
   right?: Space;
 };
-type FileData = {
+export type FileData = {
   /**
    * Selected file.
    */