group uploaded files into single batch, IE fixes (#3438)

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

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>

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

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') {
+                    if (items[i].webkitGetAsEntry) {
-                        let item = 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
+                // IE, Safari, Chrome, Edge, Firefox, Opera (Files only)
-                let files = FileUtils.toFileArray(event.dataTransfer.files);
+                const files = FileUtils.toFileArray(event.dataTransfer.files);
                 this.filesDropped.emit(files);
             }