fix: adding fileList to onChange for multi file uploads (#613)

Ibabalola · daniele-zurico · daniele-zurico · commit fc47f37c711a · 2024-05-24T10:37:15.000+01:00
* fix: missing exports (#559) * fix: adding fileList to onChange for multi file uploads --------- Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>
diff --git a/example/src/components/MultiUploadDemo.tsx b/example/src/components/MultiUploadDemo.tsx
@@ -1,25 +1,53 @@
-import * as React from 'react';
 import { MultiUpload } from '@capgeminiuk/dcx-react-library';
 
 export const MultiUploadDemo = () => {
   //@ts-ignore
-  const onChangeHandler: (file: File | null) => void = (file: File) => {
-    if (file) {
-      const date = new Date(file.lastModified).toLocaleDateString('en-us');
-      alert(`${file.name} was uploaded, it was last modified at ${date}`);
+  const onChangeHandler: (files: FileList | null) => void = (
+    files: FileList
+  ) => {
+    if (files) {
+      Array.from(files).forEach((file: File) => {
+        const date = new Date(file.lastModified).toLocaleDateString('en-us');
+        console.log(
+          `${file.name} was uploaded, it was last modified at ${date}`
+        );
+      });
     }
   };
 
   return (
-    <MultiUpload
-      name="form-input"
-      acceptedFormats=".docx"
-      hint={{
-        text: 'please upload file here',
-      }}
-      label="CV"
-      onChange={onChangeHandler}
-      fileData={true}
-    />
+    <>
+      <h1>Basic</h1>
+      <label htmlFor="basic" style={{ display: 'none' }}>
+        Basic Upload
+      </label>
+      <MultiUpload
+        id="basic"
+        name="form-input"
+        acceptedFormats=".docx"
+        hint={{
+          text: 'please upload file here',
+        }}
+        label="CV"
+        onChange={onChangeHandler}
+        fileData={true}
+      />
+      <h1>Multi</h1>
+      <label htmlFor="multi" style={{ display: 'none' }}>
+        Multi Upload
+      </label>
+      <MultiUpload
+        id="multi"
+        name="form-input"
+        acceptedFormats=".docx"
+        hint={{
+          text: 'please upload file here',
+        }}
+        label="Multi Upload"
+        multiple
+        onChange={onChangeHandler}
+        fileData={true}
+      />
+    </>
   );
 };
diff --git a/package.json b/package.json
@@ -135,4 +135,4 @@
     "@cesium133/forgjs": "1.1.10",
     "imask": "^6.4.3"
   }
-}
+}
diff --git a/src/multiUpload/MultiUpload.tsx b/src/multiUpload/MultiUpload.tsx
@@ -48,9 +48,9 @@ type MultiUploadProps = {
    */
   fileData?: boolean;
   /**
-   * multi upload onChangeEvent
+   * multi upload onChangeEvent fileList of uploaded files
    */
-  onChange?: (file: File | null) => void;
+  onChange?: (file: FileList | null) => void;
 };
 
 export const MultiUpload = ({
@@ -67,34 +67,34 @@ export const MultiUpload = ({
   fileData,
   onChange,
 }: MultiUploadProps) => {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [selectedFiles, setSelectedFile] = useState<FileList | null>(null);
 
   useEffect(() => {
-    if (selectedFile) {
-      onChange && onChange(selectedFile);
+    if (selectedFiles) {
+      onChange && onChange(selectedFiles);
     }
-  }, [selectedFile]);
+  }, [selectedFiles]);
 
-  const onChangeHandler: (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => void = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target;
-    if (files) {
-      setSelectedFile(files[0]);
-    }
-  };
+  const onChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void =
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { files } = event.target;
+
+      if (files) {
+        setSelectedFile(files);
+      }
+    };
 
   const renderFileData = () =>
-    selectedFile && (
-      <div>
-        <p>{`File Name: ${selectedFile.name}`}</p>
-        <p>{`File Type: ${selectedFile.type}`}</p>
-        <p>{`Last Modified: ${new Date(
-          selectedFile.lastModified
-        ).toLocaleDateString('en-us')}`}</p>
+    selectedFiles &&
+    Array.from(selectedFiles).map((file: File, index: number) => (
+      <div key={index}>
+        <p>{`File Name: ${file.name}`}</p>
+        <p>{`File Type: ${file.type}`}</p>
+        <p>{`Last Modified: ${new Date(file.lastModified).toLocaleDateString(
+          'en-us'
+        )}`}</p>
       </div>
-    );
-
+    ));
   return (
     <div className={className}>
       <label {...labelProperties} aria-controls={id} htmlFor={id}>
diff --git a/src/multiUpload/__test__/MultiUpload.test.tsx b/src/multiUpload/__test__/MultiUpload.test.tsx
@@ -94,7 +94,7 @@ describe('MultiUpload', () => {
     );
 
     expect(onChangeHandler).toHaveBeenCalled();
-    expect(onChangeHandler).toHaveBeenCalledWith(file);
+    expect(onChangeHandler).toHaveBeenCalledWith([file]);
   });
 
   it('should render a multi upload with an onChange handler but not call it', async () => {
diff --git a/stories/MultiUpload/ClassBased.stories.js b/stories/MultiUpload/ClassBased.stories.js
@@ -17,12 +17,16 @@ export default {
 export const Basic = {
   name: 'Basic',
   render: function ({ onChange, ...args }) {
-    const handleChange = (file) => {
-      onChange(file);
-      alert(
-        `${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString('en-us')}`
-      );
+    const handleChange = (files) => {
+      onChange(files);
+      Array.from(files).forEach((file) => {
+        const date = new Date(file.lastModified).toLocaleDateString('en-us');
+        console.log(
+          file.name + 'was uploaded, it was last modified at ' + date
+        );
+      });
     };
+
     return <MultiUpload {...args} onChange={handleChange} />;
   },
   args: {
@@ -43,12 +47,16 @@ export const Basic = {
 export const Hint = {
   name: 'Hint',
   render: function ({ onChange, ...args }) {
-    const handleChange = (file) => {
-      onChange(file);
-      alert(
-        `${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString('en-us')}`
-      );
+    const handleChange = (files) => {
+      onChange(files);
+      Array.from(files).forEach((file) => {
+        const date = new Date(file.lastModified).toLocaleDateString('en-us');
+        console.log(
+          file.name + 'was uploaded, it was last modified at ' + date
+        );
+      });
     };
+
     return <MultiUpload {...args} onChange={handleChange} />;
   },
   args: {
@@ -73,12 +81,16 @@ export const Hint = {
 export const Error = {
   name: 'Error',
   render: function ({ onChange, ...args }) {
-    const handleChange = (file) => {
-      onChange(file);
-      alert(
-        `${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString('en-us')}`
-      );
+    const handleChange = (files) => {
+      onChange(files);
+      Array.from(files).forEach((file) => {
+        const date = new Date(file.lastModified).toLocaleDateString('en-us');
+        console.log(
+          file.name + 'was uploaded, it was last modified at ' + date
+        );
+      });
     };
+
     return <MultiUpload {...args} onChange={handleChange} />;
   },
   args: {
@@ -91,7 +103,6 @@ export const Error = {
       className: 'govuk-file-upload govuk-file-upload--error',
       'aria-describedby': 'govuk-file-upload govuk-file-upload--error',
     },
-    label: 'Upload a file',
     labelProperties: {
       className: 'govuk-label',
     },
diff --git a/stories/MultiUpload/UnStyled.stories.js b/stories/MultiUpload/UnStyled.stories.js
@@ -11,12 +11,16 @@ export default {
 };
 export const Unstyled = {
   render: function ({ onChange, ...args }) {
-    const handleChange = (file) => {
-      onChange(file);
-      alert(
-        `${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString('en-us')}`
-      );
+    const handleChange = (files) => {
+      onChange(files);
+      Array.from(files).forEach((file) => {
+        const date = new Date(file.lastModified).toLocaleDateString('en-us');
+        console.log(
+          file.name + 'was uploaded, it was last modified at ' + date
+        );
+      });
     };
+
     return <MultiUpload {...args} onChange={handleChange} />;
   },
   args: {
diff --git a/stories/liveEdit/MultiUploadLive.tsx b/stories/liveEdit/MultiUploadLive.tsx
@@ -4,10 +4,14 @@ import { MultiUpload } from '../../src/multiUpload/MultiUpload';
 
 const MultiUploadDemo = `
 function MultiUploadDemo() {
-  const onChangeHandler = (file) => {
-    if (file) {
-      const date = new Date(file.lastModified).toLocaleDateString("en-us");
-      alert(file.name + 'was uploaded, it was last modified at' + date);
+  const onChangeHandler: (files) => void = (
+    files: FileList
+  ) => {
+    if (files) {
+      Array.from(files).forEach((file: File) => {
+        const date = new Date(file.lastModified).toLocaleDateString("en-us");
+        console.log(file.name + ' was uploaded, it was last modified at ' + date);
+      });
     }
   };
   return (

Original file line number	Diff line number	Diff line change
`@@ -135,4 +135,4 @@`
`135`	`135`	`"@cesium133/forgjs": "1.1.10",`
`136`	`136`	`"imask": "^6.4.3"`
`137`	`137`	`}`
`138`		`-}`
	`138`	`+}`