Skip to content

Commit

Permalink
Merge pull request #867 from vrk-kpa/fix/file-input-onchange
Browse files Browse the repository at this point in the history 
[Fix] FileInput onChange
  • Loading branch information
@riitasointi
riitasointi authored Aug 14, 2024
2 parents 0b59ff2 + 1021699 commit 629130c
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 36 deletions.
4 changes: 2 additions & 2 deletions src/core/Form/DateInput/DateInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,8 +378,8 @@ const labelText = 'Beginning date';
language="en"
tooltipComponent={
<Tooltip
ariaToggleButtonlabelText={`${labelText}, show additional information`}
ariaCloseButtonlabelText={`${labelText}, close additional information`}
ariaToggleButtonLabelText={`${labelText}, show additional information`}
ariaCloseButtonLabelText={`${labelText}, close additional information`}
>
<Heading variant="h5" as="h2">
What happens on the beginning date?
Expand Down
1 change: 1 addition & 0 deletions src/core/Form/FileInput/FileInput.baseStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export const baseStyles = (
align-items: center;
gap: ${theme.spacing.insetL};
flex-shrink: 1;
${font(theme)('bodyTextSmall')};
.fi-icon {
width: 24px;
Expand Down
4 changes: 2 additions & 2 deletions src/core/Form/FileInput/FileInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,8 +456,8 @@ const labelText = 'Resume';
hintText="Allowed file formats are: pdf and docx. Maximum file size is 5 MB"
tooltipComponent={
<Tooltip
ariaToggleButtonlabelText={`${labelText}, show additional information`}
ariaCloseButtonlabelText={`${labelText}, close additional information`}
ariaToggleButtonLabelText={`${labelText}, show additional information`}
ariaCloseButtonLabelText={`${labelText}, close additional information`}
>
<Heading variant="h5" as="h2">
About the resume
Expand Down
72 changes: 40 additions & 32 deletions src/core/Form/FileInput/FileInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,7 @@ const BaseFileInput = (props: InternalFileInputProps) => {
if (propOnChange) {
propOnChange(newFileList.files);
}
if (controlledValue === undefined) {
if (!controlledValue) {
if (inputRef.current) {
inputRef.current.files = newFileList.files;
}
Expand All @@ -422,6 +422,44 @@ const BaseFileInput = (props: InternalFileInputProps) => {
}
};

const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
const newFileList = new DataTransfer();
const filesFromEvent = event.target.files;
if (!controlledValue) {
if (multiFile) {
const previousAndNewFiles = Array.from(files || []).concat(
Array.from(filesFromEvent || []),
);
previousAndNewFiles.forEach((file) => {
newFileList.items.add(file);
});
} else {
const filesFromEventArr = Array.from(filesFromEvent || []);
filesFromEventArr.forEach((file) => {
newFileList.items.add(file);
});
}
setFilesToStateAndInput(newFileList.files);
} else if (inputRef.current) {
const controlledValueAsArray = Array.from(
buildFileListFromControlledValueObjects(controlledValue) || [],
);
const controlledFileList = new DataTransfer();
controlledValueAsArray.forEach((file) => {
controlledFileList.items.add(file);
newFileList.items.add(file);
});
inputRef.current.files = controlledFileList.files;
const filesFromEventArr = Array.from(filesFromEvent || []);
filesFromEventArr.forEach((file) => {
newFileList.items.add(file);
});
}
if (propOnChange) {
propOnChange(newFileList.files);
}
};

return (
<HtmlDiv
className={classnames(baseClassName, className, {
Expand Down Expand Up @@ -467,37 +505,7 @@ const BaseFileInput = (props: InternalFileInputProps) => {
type="file"
multiple={multiFile}
forwardedRef={forkRefs(inputRef, definedRef)}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const newFileList = new DataTransfer();
if (controlledValue === undefined) {
if (multiFile) {
const previousAndNewFiles = Array.from(files || []).concat(
Array.from(event.target.files || []),
);
previousAndNewFiles.forEach((file) => {
newFileList.items.add(file);
});
} else {
const filesFromEvent = Array.from(event.target.files || []);
filesFromEvent.forEach((file) => {
newFileList.items.add(file);
});
}
setFilesToStateAndInput(newFileList.files);
} else if (inputRef.current) {
const controlledValueAsArray = Array.from(
buildFileListFromControlledValueObjects(controlledValue) ||
[],
);
controlledValueAsArray.forEach((file) =>
newFileList.items.add(file),
);
inputRef.current.files = newFileList.files;
}
if (propOnChange) {
propOnChange(newFileList.files);
}
}}
onChange={handleOnChange}
onFocus={() => {
if (!multiFile && !filePreview && files && files.length === 1) {
setMockInputWrapperFocus(true);
Expand Down
52 changes: 52 additions & 0 deletions src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,19 @@ exports[`snapshots match error status with statustext 1`] = `
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
letter-spacing: 0;
-webkit-text-decoration: none;
text-decoration: none;
word-break: break-word;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
}
.c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon {
Expand Down Expand Up @@ -976,6 +989,19 @@ exports[`snapshots match hidden label 1`] = `
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
letter-spacing: 0;
-webkit-text-decoration: none;
text-decoration: none;
word-break: break-word;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
}
.c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon {
Expand Down Expand Up @@ -1618,6 +1644,19 @@ exports[`snapshots match hint text 1`] = `
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
letter-spacing: 0;
-webkit-text-decoration: none;
text-decoration: none;
word-break: break-word;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
}
.c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon {
Expand Down Expand Up @@ -2250,6 +2289,19 @@ exports[`snapshots match minimal implementation 1`] = `
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
letter-spacing: 0;
-webkit-text-decoration: none;
text-decoration: none;
word-break: break-word;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
}
.c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon {
Expand Down

0 comments on commit 629130c

Please sign in to comment.