fix(FileUploaderDropContainer): enforce multiple prop on drag-and-drop (#18669)

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>

Author: adamalston

packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -150,13 +150,15 @@ function FileUploaderDropContainer({
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     const files = [...(event.target.files ?? [])];
-    const addedFiles = validateFiles(files);
+    const filesToValidate = multiple ? files : [files[0]];
+    const addedFiles = validateFiles(filesToValidate);
     return onAddFiles(event, { addedFiles });
   }
 
   function handleDrop(event: React.DragEvent<HTMLDivElement>) {
     const files = [...event.dataTransfer.files];
-    const addedFiles = validateFiles(files);
+    const filesToValidate = multiple ? files : [files[0]];
+    const addedFiles = validateFiles(filesToValidate);
     return onAddFiles(event, { addedFiles });
   }
 

packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -80,7 +80,11 @@ describe('FileUploaderDropContainer', () => {
   it('should call `onAddFiles` when a file is selected', () => {
     const onAddFiles = jest.fn();
     const { container } = render(
-      <FileUploaderDropContainer onAddFiles={onAddFiles} {...requiredProps} />
+      <FileUploaderDropContainer
+        multiple
+        onAddFiles={onAddFiles}
+        {...requiredProps}
+      />
     );
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const input = container.querySelector('input');
@@ -105,8 +109,9 @@ describe('FileUploaderDropContainer', () => {
     const onAddFiles = jest.fn();
     const { container } = render(
       <FileUploaderDropContainer
-        onAddFiles={onAddFiles}
         accept={['.txt']}
+        multiple
+        onAddFiles={onAddFiles}
         {...requiredProps}
       />
     );
@@ -152,8 +157,9 @@ describe('FileUploaderDropContainer', () => {
     const onAddFiles = jest.fn();
     const { container } = render(
       <FileUploaderDropContainer
-        onAddFiles={onAddFiles}
         accept={['.jpeg']}
+        multiple
+        onAddFiles={onAddFiles}
         {...requiredProps}
       />
     );
@@ -195,8 +201,9 @@ describe('FileUploaderDropContainer', () => {
     const onAddFiles = jest.fn();
     const { container } = render(
       <FileUploaderDropContainer
-        onAddFiles={onAddFiles}
         accept={['.txt', '.a_a', '.b-b', '.a-b_c']}
+        multiple
+        onAddFiles={onAddFiles}
         pattern=".[0-9a-z-_]+$"
         {...requiredProps}
       />
@@ -259,6 +266,7 @@ describe('FileUploaderDropContainer', () => {
     const { container } = render(
       <FileUploaderDropContainer
         accept={['.png']}
+        multiple
         onAddFiles={onAddFiles}
         {...requiredProps}
       />
@@ -501,4 +509,31 @@ describe('FileUploaderDropContainer', () => {
     dropArea.dispatchEvent(dropEvent);
     expect(handleDrop).not.toHaveBeenCalled();
   });
+
+  it('should only emit one file when multiple files are dropped and `multiple` is false', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer
+        onAddFiles={onAddFiles}
+        multiple={false}
+        {...requiredProps}
+      />
+    );
+    const dropArea = container.firstChild;
+    const files = [
+      new File(['content'], 'file1.txt', { type: 'text/plain' }),
+      new File(['content'], 'file2.txt', { type: 'text/plain' }),
+    ];
+    const dropEvent = {
+      dataTransfer: { files },
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+
+    fireEvent.drop(dropArea, dropEvent);
+
+    expect(onAddFiles).toHaveBeenCalledWith(expect.anything(), {
+      addedFiles: [files[0]],
+    });
+  });
 });