From 302091d338abbf30de1f21d74af90ad6df085350 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Wed, 6 Jun 2018 09:14:17 +0100
Subject: [PATCH] group uploaded files into single batch, IE fixes (#3438)

---
 .../file-draggable.directive.md               |  8 +----
 .../upload-drag-area.component.html           |  1 -
 .../components/upload-drag-area.component.ts  |  1 +
 .../directives/file-draggable.directive.ts    | 30 ++++++++++++-------
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/docs/content-services/file-draggable.directive.md b/docs/content-services/file-draggable.directive.md
index 519d439acc..d9654dce04 100644
--- a/docs/content-services/file-draggable.directive.md
+++ b/docs/content-services/file-draggable.directive.md
@@ -13,7 +13,6 @@ Provides drag-and-drop features for an element such as a `div`.
 ```html
 <div [file-draggable]="true" id="DragAndDropBorder" class="drag-and-drop-border"
      (filesDropped)="onFilesDropped($event)"
-     (filesEntityDropped)="onFilesEntityDropped($event)"
      (folderEntityDropped)="onFolderEntityDropped($event)"
      dropzone="" webkitdropzone="*" #dragAndDropArea>
   <ng-content></ng-content>
@@ -47,7 +46,7 @@ Some sample CSS to show the drag and drop area:
 | Name | Type | Description |
 | -- | -- | -- |
 | filesDropped | `EventEmitter<File[]>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
-| filesEntityDropped | `EventEmitter<any>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
+| filesEntityDropped | `EventEmitter<any>` | **Deprecated in 2.4.0**: use `filesDropped` instead. Emitted when one or more files are dragged and dropped onto the draggable element. |
 | folderEntityDropped | `EventEmitter<any>` | Emitted when a directory is dragged and dropped onto the draggable element. |
 
 ## Details
@@ -66,11 +65,6 @@ export class SomeComponent implements OnInit {
     }
   }
 
-  onFilesEntityDropped(item: any): void {
-    // Use for example the uploadService to upload files to ACS
-    console.log('# of files dropped: ', item);
-  }
-
   onFolderEntityDropped(folder: any): void {
     if (folder.isDirectory) {
       // Use for example the uploadService to upload folder content to ACS
diff --git a/lib/content-services/upload/components/upload-drag-area.component.html b/lib/content-services/upload/components/upload-drag-area.component.html
index 20a481ef21..9bce3fa899 100644
--- a/lib/content-services/upload/components/upload-drag-area.component.html
+++ b/lib/content-services/upload/components/upload-drag-area.component.html
@@ -1,6 +1,5 @@
 <div [file-draggable]="isDroppable()" class="upload-border"
      (filesDropped)="onFilesDropped($event)"
-     (filesEntityDropped)="onFilesEntityDropped($event)"
      (folderEntityDropped)="onFolderEntityDropped($event)"
      (upload-files)="onUploadFiles($event)"
      dropzone="" webkitdropzone="*" #droparea>
diff --git a/lib/content-services/upload/components/upload-drag-area.component.ts b/lib/content-services/upload/components/upload-drag-area.component.ts
index c72756032f..0552785421 100644
--- a/lib/content-services/upload/components/upload-drag-area.component.ts
+++ b/lib/content-services/upload/components/upload-drag-area.component.ts
@@ -60,6 +60,7 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
     }
 
     /**
+     * @deprecated in 2.4.0: use `onFilesDropped` instead
      * Called when the file are dropped in the drag area
      *
      * @param item - FileEntity
diff --git a/lib/content-services/upload/directives/file-draggable.directive.ts b/lib/content-services/upload/directives/file-draggable.directive.ts
index 8ffdce64d4..de9da851e6 100644
--- a/lib/content-services/upload/directives/file-draggable.directive.ts
+++ b/lib/content-services/upload/directives/file-draggable.directive.ts
@@ -35,7 +35,9 @@ export class FileDraggableDirective implements OnInit, OnDestroy {
     @Output()
     filesDropped: EventEmitter<File[]> = new EventEmitter<File[]>();
 
-    /** Emitted when one or more files are dragged and dropped onto the draggable element. */
+    /** @deprecated in 2.4.0: use `filesDropped` instead.
+     * Emitted when one or more files are dragged and dropped onto the draggable element.
+     */
     @Output()
     filesEntityDropped: EventEmitter<any> = new EventEmitter();
 
@@ -74,26 +76,34 @@ export class FileDraggableDirective implements OnInit, OnDestroy {
         if (this.enabled && !event.defaultPrevented) {
             this.preventDefault(event);
 
-            let items = event.dataTransfer.items;
+            // Chrome, Edge, Firefox, Opera (Files + Folders)
+            const items = event.dataTransfer.items;
             if (items) {
+                const files: File[] = [];
+
                 for (let i = 0; i < items.length; i++) {
-                    if (typeof items[i].webkitGetAsEntry !== 'undefined') {
-                        let item = items[i].webkitGetAsEntry();
+                    if (items[i].webkitGetAsEntry) {
+                        const item = items[i].webkitGetAsEntry();
+
                         if (item) {
                             if (item.isFile) {
-                                this.filesEntityDropped.emit(item);
+                                const file = items[i].getAsFile();
+
+                                if (file) {
+                                    files.push(file);
+                                }
                             } else if (item.isDirectory) {
                                 this.folderEntityDropped.emit(item);
                             }
                         }
-                    } else {
-                        let files = FileUtils.toFileArray(event.dataTransfer.files);
-                        this.filesDropped.emit(files);
                     }
                 }
+                if (files.length > 0) {
+                    this.filesDropped.emit(files);
+                }
             } else {
-                // safari or FF
-                let files = FileUtils.toFileArray(event.dataTransfer.files);
+                // IE, Safari, Chrome, Edge, Firefox, Opera (Files only)
+                const files = FileUtils.toFileArray(event.dataTransfer.files);
                 this.filesDropped.emit(files);
             }