fix: multiple file upload issue (#4347)

* fix: multiple file upload issue Resolved a bug where only the first file was uploaded when multiple files were selected. Now, all selected files are uploaded as expected. * feature: Added test to check the expected behaviour * Fix: Move entry of changelog to version 5.22.2 --------- Co-authored-by: Heath C <[email protected]>
rjsf-team · Oct 28, 2024 · 6a91898 · 6a91898
1 parent 13550f0
commit 6a91898
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git 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
@@ -169,7 +169,7 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       processFiles(event.target.files).then((filesInfoEvent) => {
         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
@@ -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,