Skip to content

Commit 698a786

Browse files
IbabalolaIbabalola
committed
fix: adding fileList to onChange for multi file uploads
1 parent 5f168e9 commit 698a786

File tree

6 files changed

+153
-99
lines changed

6 files changed

+153
-99
lines changed

‎example/src/components/MultiUploadDemo.tsx

+43-15
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,53 @@
1-
import * as React from 'react';
21
import { MultiUpload } from '@capgeminiuk/dcx-react-library';
32

43
export const MultiUploadDemo = () => {
54
//@ts-ignore
6-
const onChangeHandler: (file: File | null) => void = (file: File) => {
7-
if (file) {
8-
const date = new Date(file.lastModified).toLocaleDateString('en-us');
9-
alert(`${file.name} was uploaded, it was last modified at ${date}`);
5+
const onChangeHandler: (files: FileList | null) => void = (
6+
files: FileList
7+
) => {
8+
if (files) {
9+
Array.from(files).forEach((file: File) => {
10+
const date = new Date(file.lastModified).toLocaleDateString('en-us');
11+
console.log(
12+
`${file.name} was uploaded, it was last modified at ${date}`
13+
);
14+
});
1015
}
1116
};
1217

1318
return (
14-
<MultiUpload
15-
name="form-input"
16-
acceptedFormats=".docx"
17-
hint={{
18-
text: 'please upload file here',
19-
}}
20-
label="CV"
21-
onChange={onChangeHandler}
22-
fileData={true}
23-
/>
19+
<>
20+
<h1>Basic</h1>
21+
<label htmlFor="basic" style={{ display: 'none' }}>
22+
Basic Upload
23+
</label>
24+
<MultiUpload
25+
id="basic"
26+
name="form-input"
27+
acceptedFormats=".docx"
28+
hint={{
29+
text: 'please upload file here',
30+
}}
31+
label="CV"
32+
onChange={onChangeHandler}
33+
fileData={true}
34+
/>
35+
<h1>Multi</h1>
36+
<label htmlFor="multi" style={{ display: 'none' }}>
37+
Multi Upload
38+
</label>
39+
<MultiUpload
40+
id="multi"
41+
name="form-input"
42+
acceptedFormats=".docx"
43+
hint={{
44+
text: 'please upload file here',
45+
}}
46+
label="Multi Upload"
47+
multiple
48+
onChange={onChangeHandler}
49+
fileData={true}
50+
/>
51+
</>
2452
);
2553
};

‎src/multiUpload/MultiUpload.tsx

+23-23
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ type MultiUploadProps = {
4848
*/
4949
fileData?: boolean;
5050
/**
51-
* multi upload onChangeEvent
51+
* multi upload onChangeEvent fileList of uploaded files
5252
*/
53-
onChange?: (file: File | null) => void;
53+
onChange?: (file: FileList | null) => void;
5454
};
5555

5656
export const MultiUpload = ({
@@ -67,34 +67,34 @@ export const MultiUpload = ({
6767
fileData,
6868
onChange,
6969
}: MultiUploadProps) => {
70-
const [selectedFile, setSelectedFile] = useState<File | null>(null);
70+
const [selectedFiles, setSelectedFile] = useState<FileList | null>(null);
7171

7272
useEffect(() => {
73-
if (selectedFile) {
74-
onChange && onChange(selectedFile);
73+
if (selectedFiles) {
74+
onChange && onChange(selectedFiles);
7575
}
76-
}, [selectedFile]);
76+
}, [selectedFiles]);
7777

78-
const onChangeHandler: (
79-
event: React.ChangeEvent<HTMLInputElement>
80-
) => void = (event: React.ChangeEvent<HTMLInputElement>) => {
81-
const { files } = event.target;
82-
if (files) {
83-
setSelectedFile(files[0]);
84-
}
85-
};
78+
const onChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void =
79+
(event: React.ChangeEvent<HTMLInputElement>) => {
80+
const { files } = event.target;
81+
82+
if (files) {
83+
setSelectedFile(files);
84+
}
85+
};
8686

8787
const renderFileData = () =>
88-
selectedFile && (
89-
<div>
90-
<p>{`File Name: ${selectedFile.name}`}</p>
91-
<p>{`File Type: ${selectedFile.type}`}</p>
92-
<p>{`Last Modified: ${new Date(
93-
selectedFile.lastModified
94-
).toLocaleDateString('en-us')}`}</p>
88+
selectedFiles &&
89+
Array.from(selectedFiles).map((file: File, index: number) => (
90+
<div key={index}>
91+
<p>{`File Name: ${file.name}`}</p>
92+
<p>{`File Type: ${file.type}`}</p>
93+
<p>{`Last Modified: ${new Date(file.lastModified).toLocaleDateString(
94+
'en-us'
95+
)}`}</p>
9596
</div>
96-
);
97-
97+
));
9898
return (
9999
<div className={className}>
100100
<label {...labelProperties} aria-controls={id} htmlFor={id}>

‎src/multiUpload/__test__/MultiUpload.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ describe('MultiUpload', () => {
9494
);
9595

9696
expect(onChangeHandler).toHaveBeenCalled();
97-
expect(onChangeHandler).toHaveBeenCalledWith(file);
97+
expect(onChangeHandler).toHaveBeenCalledWith([file]);
9898
});
9999

100100
it('should render a multi upload with an onChange handler but not call it', async () => {

‎stories/MultiUpload/ClassBased.stories.js

+63-46
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { MultiUpload } from '../../src/multiUpload/MultiUpload';
22
/**
3-
* In this section we're using the button component providing the **GovUk style** passing the relative `className.
3+
* In this section we're using the button component providing the **GovUk style** passing the relative `className.
44
* Feel free to use your own css to style the formInput as you prefer.
55
*/
66
export default {
@@ -11,93 +11,110 @@ export default {
1111
showPanel: true,
1212
},
1313
},
14-
tags: ['autodocs']
14+
tags: ['autodocs'],
1515
};
1616

1717
export const Basic = {
1818
name: 'Basic',
19-
render: function ({onChange,...args}) {
20-
const handleChange = file => {
21-
onChange(file);
22-
alert(`${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString("en-us")}`);
23-
}
24-
return (<MultiUpload {...args} onChange={handleChange}/>);
19+
render: function ({ onChange, ...args }) {
20+
const handleChange = (files) => {
21+
onChange(files);
22+
Array.from(files).forEach((file) => {
23+
const date = new Date(file.lastModified).toLocaleDateString('en-us');
24+
console.log(
25+
file.name + 'was uploaded, it was last modified at ' + date
26+
);
27+
});
28+
};
29+
30+
return <MultiUpload {...args} onChange={handleChange} />;
2531
},
2632
args: {
27-
name:"file-upload-1",
28-
label:"Upload a file",
29-
id:"file-upload-1",
30-
className:"govuk-form-group",
31-
inputProperties:{
33+
name: 'file-upload-1',
34+
label: 'Upload a file',
35+
id: 'file-upload-1',
36+
className: 'govuk-form-group',
37+
inputProperties: {
3238
className: 'govuk-file-upload',
3339
},
34-
labelProperties:{
40+
labelProperties: {
3541
className: 'govuk-label',
36-
}
42+
},
3743
},
3844
argTypes: { onChange: { action: 'onChange' } },
3945
};
4046

4147
export const Hint = {
4248
name: 'Hint',
43-
render: function ({onChange,...args}) {
44-
const handleChange = file => {
45-
onChange(file);
46-
alert(`${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString("en-us")}`);
47-
}
48-
return (<MultiUpload {...args} onChange={handleChange}/>);
49+
render: function ({ onChange, ...args }) {
50+
const handleChange = (files) => {
51+
onChange(files);
52+
Array.from(files).forEach((file) => {
53+
const date = new Date(file.lastModified).toLocaleDateString('en-us');
54+
console.log(
55+
file.name + 'was uploaded, it was last modified at ' + date
56+
);
57+
});
58+
};
59+
60+
return <MultiUpload {...args} onChange={handleChange} />;
4961
},
5062
args: {
51-
name:"file-upload-2",
52-
label:"Upload a file",
53-
id:"file-upload-2",
54-
className:"govuk-form-group",
55-
hint:{
63+
name: 'file-upload-2',
64+
label: 'Upload a file',
65+
id: 'file-upload-2',
66+
className: 'govuk-form-group',
67+
hint: {
5668
text: 'This can be in either JPG or PNG format',
5769
className: 'govuk-hint',
5870
},
59-
inputProperties:{
71+
inputProperties: {
6072
className: 'govuk-file-upload',
6173
},
62-
labelProperties:{
74+
labelProperties: {
6375
className: 'govuk-label',
64-
}
76+
},
6577
},
6678
argTypes: { onChange: { action: 'onChange' } },
6779
};
6880

6981
export const Error = {
7082
name: 'Error',
71-
render: function ({onChange,...args}) {
72-
const handleChange = file => {
73-
onChange(file);
74-
alert(`${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString("en-us")}`);
75-
}
76-
return (<MultiUpload {...args} onChange={handleChange}/>);
83+
render: function ({ onChange, ...args }) {
84+
const handleChange = (files) => {
85+
onChange(files);
86+
Array.from(files).forEach((file) => {
87+
const date = new Date(file.lastModified).toLocaleDateString('en-us');
88+
console.log(
89+
file.name + 'was uploaded, it was last modified at ' + date
90+
);
91+
});
92+
};
93+
94+
return <MultiUpload {...args} onChange={handleChange} />;
7795
},
7896
args: {
79-
name:"file-upload-3",
80-
label:"Upload a file",
81-
id:"file-upload-3",
82-
className:"govuk-form-group govuk-form-group--error",
83-
acceptedFormats:".jpg, .png",
84-
inputProperties:{
97+
name: 'file-upload-3',
98+
label: 'Upload a file',
99+
id: 'file-upload-3',
100+
className: 'govuk-form-group govuk-form-group--error',
101+
acceptedFormats: '.jpg, .png',
102+
inputProperties: {
85103
className: 'govuk-file-upload govuk-file-upload--error',
86104
'aria-describedby': 'govuk-file-upload govuk-file-upload--error',
87105
},
88-
label:"Upload a file",
89-
labelProperties:{
106+
labelProperties: {
90107
className: 'govuk-label',
91108
},
92-
error:{
109+
error: {
93110
text: 'The CSV must be smaller than 2MB',
94111
className: 'govuk-error-message',
95112
id: 'file-upload-1-error',
96113
visuallyHiddenText: {
97114
text: 'Error:',
98115
className: 'govuk-visually-hidden',
99116
},
100-
}
117+
},
101118
},
102119
argTypes: { onChange: { action: 'onChange' } },
103-
};
120+
};

‎stories/MultiUpload/UnStyled.stories.js

+15-10
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,22 @@ export default {
1010
},
1111
};
1212
export const Unstyled = {
13-
render: function ({onChange,...args}) {
14-
const handleChange = file => {
15-
onChange(file);
16-
alert(`${file.name} was uploaded, it was last modified at ${new Date(file.lastModified).toLocaleDateString("en-us")}`);
17-
}
18-
return (<MultiUpload {...args} onChange={handleChange}/>);
13+
render: function ({ onChange, ...args }) {
14+
const handleChange = (files) => {
15+
onChange(files);
16+
Array.from(files).forEach((file) => {
17+
const date = new Date(file.lastModified).toLocaleDateString('en-us');
18+
console.log(
19+
file.name + 'was uploaded, it was last modified at ' + date
20+
);
21+
});
22+
};
23+
24+
return <MultiUpload {...args} onChange={handleChange} />;
1925
},
2026
args: {
21-
name:"file-upload",
22-
label:"Upload File"
27+
name: 'file-upload',
28+
label: 'Upload File',
2329
},
2430
argTypes: { onChange: { action: 'onChange' } },
25-
26-
};
31+
};

‎stories/liveEdit/MultiUploadLive.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ import { MultiUpload } from '../../src/multiUpload/MultiUpload';
44

55
const MultiUploadDemo = `
66
function MultiUploadDemo() {
7-
const onChangeHandler = (file) => {
8-
if (file) {
9-
const date = new Date(file.lastModified).toLocaleDateString("en-us");
10-
alert(file.name + 'was uploaded, it was last modified at' + date);
7+
const onChangeHandler: (files) => void = (
8+
files: FileList
9+
) => {
10+
if (files) {
11+
Array.from(files).forEach((file: File) => {
12+
const date = new Date(file.lastModified).toLocaleDateString("en-us");
13+
console.log(file.name + ' was uploaded, it was last modified at ' + date);
14+
});
1115
}
1216
};
1317
return (

0 commit comments

Comments
 (0)