Merge pull request UiPath#51 from UiPath/fix/dragdropmultiple

fix(drag-and-drop-file): respect multiple=false flag

Author: toxik

projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.spec.ts

@@ -18,6 +18,7 @@ import { UiDragAndDropFileDirective } from './ui-drag-and-drop-file.directive';
         [fileType]="fileType"
         [fileClearRef]="clearRef"
         [disabled]="disabled"
+        [multiple]="multiple"
         (fileClear)="onFileClear()"
         (fileChange)="onFileChange($event)">
         Test
@@ -30,6 +31,7 @@ class TestDragAndDropFileComponent {
     public fileType = '.txt';
     public files?: File[];
     public disabled = false;
+    public multiple = false;
 
     onFileChange(files: FileList) {
         this.files = Array.from(files);
@@ -159,6 +161,9 @@ describe('Directive: UiDragAndDropFileDirective', () => {
             });
 
             it('should filter different file types', () => {
+                component.multiple = true;
+                fixture.detectChanges();
+
                 dropEvent.dataTransfer.files.add(
                     fakeFile(component.fileType),
                     fakeFile(component.fileType),
@@ -173,6 +178,17 @@ describe('Directive: UiDragAndDropFileDirective', () => {
                 expect(component.files).toBeDefined();
                 expect(component.files!.length).toBe(3);
             });
+
+            it('should NOT allow multiple files when multiple=false', () => {
+                dropEvent.dataTransfer.files.add(
+                    fakeFile('.jpg'),
+                    fakeFile('.png'),
+                );
+
+                container.dispatchEvent(dropEvent);
+
+                expect(component.files).toBeUndefined();
+            });
         });
 
         describe('via input', () => {
@@ -209,6 +225,9 @@ describe('Directive: UiDragAndDropFileDirective', () => {
             });
 
             it('should filter different file types', () => {
+                component.multiple = true;
+                fixture.detectChanges();
+
                 targetElement.files.add(
                     fakeFile(component.fileType),
                     fakeFile(component.fileType),

projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.ts

@@ -167,7 +167,10 @@ export class UiDragAndDropFileDirective implements AfterViewInit, OnDestroy {
   @HostListener('dragover', ['$event'])
   protected _onDragOver(ev: DragEvent) {
       this._preventAll(ev);
-      if (this.disabled) { return; }
+    if (
+      this.disabled ||
+      ev.dataTransfer && ev.dataTransfer.items.length > 1 && !this.multiple
+    ) { return; }
       this._isDragging = true;
   }
 
@@ -217,7 +220,10 @@ export class UiDragAndDropFileDirective implements AfterViewInit, OnDestroy {
       file.name.endsWith(this.fileType),
       );
 
-      if (!emittedFiles.length) { return; }
+    if (
+      !emittedFiles.length ||
+      emittedFiles.length > 1 && !this.multiple
+    ) { return; }
 
       this.fileChange.emit(emittedFiles);
   }