fix: adjust CvFileUploader drop handler

Check 'multiple' attr before passing files to 'addFiles'. if multiple is
falsy, it will only pass the first dropped file.

src/components/CvFileUploader/CvFileUploader.vue

@@ -97,7 +97,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, useAttrs } from 'vue';
 import CvFileUploaderItem from './CvFileUploaderItem.vue';
 import { carbonPrefix } from '../../global/settings';
 import { CvFormItem } from '../CvForm';
@@ -110,6 +110,8 @@ import {
 
 const emit = defineEmits(['update:modelValue']);
 
+const attrs = useAttrs();
+
 const props = defineProps({
   accept: { type: String, default: undefined },
   buttonKind: commonCvButtonProps.kind,
@@ -271,7 +273,10 @@ function onDragEvent(evt) {
 
   if (evt.type === 'drop') {
     evt.preventDefault();
-    addFiles(evt.dataTransfer.files);
+    const files = attrs.multiple
+      ? evt.dataTransfer.files
+      : [evt.dataTransfer.files[0]];
+    addFiles(files);
     allowDrop.value = false;
   }
 }

src/components/CvFileUploader/__tests__/CvFileUploader.spec.js

@@ -604,6 +604,61 @@ describe('CvFileUploader', () => {
       expect(emitResult[0]).toHaveLength(1);
       expect(emitResult[0][0].file.name).toBe(dummyFile.name);
     });
+
+    it('emits a single file when attr multiple is falsy', async () => {
+      const dummyFiles = [
+        new File(['file content'], 'dummy-file1.txt', {
+          type: 'text/plain',
+        }),
+        new File(['file content'], 'dummy-file2.txt', {
+          type: 'text/plain',
+        }),
+      ];
+      const { container, emitted } = render(CvFileUploader);
+
+      const dropZone = container.querySelector(
+        `div.${carbonPrefix}--file-browse-btn`
+      );
+      await fireEvent.drop(dropZone, {
+        dataTransfer: {
+          files: dummyFiles,
+          types: ['Files'],
+        },
+      });
+
+      const emitResult = emitted('update:modelValue').at(0);
+      expect(emitResult[0]).toHaveLength(1);
+    });
+
+    it('emits all dropped files when attr multiple is truthy', async () => {
+      const dummyFiles = [
+        new File(['file content'], 'dummy-file1.txt', {
+          type: 'text/plain',
+        }),
+        new File(['file content'], 'dummy-file2.txt', {
+          type: 'text/plain',
+        }),
+        new File(['file content'], 'dummy-file3.txt', {
+          type: 'text/plain',
+        }),
+      ];
+      const { container, emitted } = render(CvFileUploader, {
+        attrs: { multiple: true },
+      });
+
+      const dropZone = container.querySelector(
+        `div.${carbonPrefix}--file-browse-btn`
+      );
+      await fireEvent.drop(dropZone, {
+        dataTransfer: {
+          files: dummyFiles,
+          types: ['Files'],
+        },
+      });
+
+      const emitResult = emitted('update:modelValue').at(0);
+      expect(emitResult[0]).toHaveLength(3);
+    });
   });
 
   describe('File listing', () => {