diff --git a/CHANGELOG.md b/CHANGELOG.md index ef6f0094ec..430724c2d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ should change the heading of the (upcoming) version to include a major version b ## @rjsf/core +- Fix an issue where only the first file was uploaded when users selected multiple files for upload. - Fixed validation regression Form not revalidating after formData change, fixing [#4343](https://github.com/rjsf-team/react-jsonschema-form/issues/4343) ## @rjsf/validator-ajv8 diff --git a/packages/core/src/components/widgets/FileWidget.tsx b/packages/core/src/components/widgets/FileWidget.tsx index b24bc92feb..5c41ad14d1 100644 --- a/packages/core/src/components/widgets/FileWidget.tsx +++ b/packages/core/src/components/widgets/FileWidget.tsx @@ -169,7 +169,7 @@ function FileWidget { const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL); if (multiple) { - onChange(value.concat(newValue[0])); + onChange(value.concat(newValue)); } else { onChange(newValue[0]); } diff --git a/packages/core/test/ArrayField.test.jsx b/packages/core/test/ArrayField.test.jsx index 7dec35974a..9033076584 100644 --- a/packages/core/test/ArrayField.test.jsx +++ b/packages/core/test/ArrayField.test.jsx @@ -1702,6 +1702,41 @@ describe('ArrayField', () => { ); }); + it('should handle a change event with multiple files that results the same items in the list', async () => { + sandbox.stub(window, 'FileReader').returns({ + set onload(fn) { + fn({ target: { result: 'data:text/plain;base64,x=' } }); + }, + // eslint-disable-next-line @typescript-eslint/no-empty-function + readAsDataUrl() {}, + }); + + const { node, onChange } = createFormComponent({ schema }); + + act(() => { + fireEvent.change(node.querySelector('.field input[type=file]'), { + target: { + files: [ + { name: 'file1.txt', size: 1, type: 'type' }, + { name: 'file2.txt', size: 2, type: 'type' }, + ], + }, + }); + }); + + await act(() => { + new Promise(setImmediate); + }); + + sinon.assert.calledWithMatch( + onChange.lastCall, + { + formData: ['data:text/plain;name=file1.txt;base64,x=', 'data:text/plain;name=file2.txt;base64,x='], + }, + 'root' + ); + }); + it('should fill field with data', () => { const { node } = createFormComponent({ schema,