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

This commit is contained in:
Denys Vuika
2018-06-06 09:14:17 +01:00
committed by Eugenio Romano
parent 74ed04dc53
commit 302091d338
4 changed files with 22 additions and 18 deletions

View File

@@ -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

View File

@@ -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>

View File

@@ -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

View File

@@ -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);
}
}
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);
}