improved uploading of files (#1730)

* improved uploading of files

- new core/UploadDirective to allow dropping files to any html element
- enhanced file dropping for DataTable rows (disabled by default)
- enhanced file dropping for DocumentList rows (disabled by default)
- upload drop area now handles file uploads for child elements (i.e.
rows in the document list)

* fix unit tests

* unit tests and code cleanup

* #1732, fix upload of folders

ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts

@@ -0,0 +1,136 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ElementRef } from '@angular/core';
+import { UploadDirective } from './upload.directive';
+
+describe('UploadDirective', () => {
+
+    let directive: UploadDirective;
+    let nativeElement: any;
+
+    beforeEach(() => {
+        nativeElement = {
+            dispatchEvent: () => {}
+        };
+        directive = new UploadDirective(new ElementRef(nativeElement));
+    });
+
+    it('should be enabled by default', () => {
+        expect(directive.enabled).toBeTruthy();
+    });
+
+    it('should have debug mode switched off by default', () => {
+        expect(directive.debug).toBeFalsy();
+    });
+
+    it('should update drag status on dragenter', () => {
+        expect(directive.isDragging).toBeFalsy();
+        directive.enabled = true;
+        directive.onDragEnter();
+        expect(directive.isDragging).toBeTruthy();
+    });
+
+    it('should not update drag status on dragenter when disabled', () => {
+        expect(directive.isDragging).toBeFalsy();
+        directive.enabled = false;
+        directive.onDragEnter();
+        expect(directive.isDragging).toBeFalsy();
+    });
+
+    it('should update drag status on dragover', () => {
+        expect(directive.isDragging).toBeFalsy();
+        directive.enabled = true;
+        directive.onDragOver(null);
+        expect(directive.isDragging).toBeTruthy();
+    });
+
+    it('should prevent default event on dragover', () => {
+        let event = new Event('dom-event');
+        spyOn(event, 'preventDefault').and.stub();
+        directive.enabled = true;
+        directive.onDragOver(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(directive.isDragging).toBeTruthy();
+    });
+
+    it('should not update drag status on dragover when disabled', () => {
+        expect(directive.isDragging).toBeFalsy();
+        directive.enabled = false;
+        directive.onDragOver(null);
+    });
+
+    it('should update drag status on dragleave', () => {
+        directive.enabled = true;
+        directive.isDragging = true;
+        directive.onDragLeave();
+        expect(directive.isDragging).toBeFalsy();
+    });
+
+    it('should not update drag status on dragleave when disabled', () => {
+        directive.enabled = false;
+        directive.isDragging = true;
+        directive.onDragLeave();
+        expect(directive.isDragging).toBeTruthy();
+    });
+
+    it('should prevent default event on drop', () => {
+        directive.enabled = true;
+        let event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
+        directive.onDrop(<DragEvent>event);
+        expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should stop default event propagation on drop', () => {
+        directive.enabled = true;
+        let event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
+        directive.onDrop(<DragEvent>event);
+        expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should not prevent default event on drop when disabled', () => {
+        directive.enabled = false;
+        let event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
+        directive.onDrop(<DragEvent>event);
+        expect(event.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it('should raise upload-files event on files drop', () => {
+        directive.enabled = true;
+        let files = [<File> {}];
+        let event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
+        spyOn(directive, 'getFilesDropped').and.returnValue(files);
+        spyOn(nativeElement, 'dispatchEvent').and.stub();
+        directive.onDrop(event);
+        expect(nativeElement.dispatchEvent).toHaveBeenCalled();
+    });
+
+    it('should provide dropped files in upload-files event', () => {
+        directive.enabled = true;
+        let files = [<File> {}];
+        let event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
+        spyOn(directive, 'getFilesDropped').and.returnValue(files);
+
+        spyOn(nativeElement, 'dispatchEvent').and.callFake(e => {
+            expect(e.detail.files.length).toBe(1);
+            expect(e.detail.files[0]).toBe(files[0]);
+        });
+        directive.onDrop(event);
+        expect(nativeElement.dispatchEvent).toHaveBeenCalled();
+    });
+
+});

ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts

@@ -0,0 +1,113 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Directive, Input, HostBinding, HostListener, ElementRef } from '@angular/core';
+
+@Directive({
+    selector: '[adf-upload]'
+})
+export class UploadDirective {
+
+    @Input('adf-upload')
+    enabled: boolean = true;
+
+    @Input('adf-upload-data')
+    data: any;
+
+    @Input()
+    debug: boolean = false;
+
+    @HostBinding('class.adf-upload__dragging')
+    isDragging: boolean;
+
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('dragenter')
+    onDragEnter() {
+        if (this.enabled) {
+            this.isDragging = true;
+        }
+    }
+
+    @HostListener('dragover', ['$event'])
+    onDragOver(event: Event) {
+        if (this.enabled) {
+            if (event) {
+                event.preventDefault();
+            }
+            this.isDragging = true;
+        }
+    }
+
+    @HostListener('dragleave')
+    onDragLeave() {
+        if (this.enabled) {
+            this.isDragging = false;
+        }
+    }
+
+    @HostListener('drop', ['$event'])
+    onDrop(event: DragEvent) {
+        if (this.enabled) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            this.isDragging = false;
+
+            let files = this.getFilesDropped(event.dataTransfer);
+            if (files.length > 0) {
+                let e = new CustomEvent('upload-files', {
+                    detail: {
+                        sender: this,
+                        data: this.data,
+                        files: files
+                    },
+                    bubbles: true
+                });
+
+                this.el.nativeElement.dispatchEvent(e);
+            }
+        }
+    }
+
+    /**
+     * Extract files from the DataTransfer object used to hold the data that is being dragged during a drag and drop operation.
+     * @param dataTransfer DataTransfer object
+     */
+    protected getFilesDropped(dataTransfer: DataTransfer): File[] {
+        let result: File[] = [];
+
+        if (dataTransfer) {
+            let items: DataTransferItemList = dataTransfer.items;
+
+            if (items && items.length > 0) {
+                for (let i = 0; i < items.length; i++) {
+                    let item: DataTransferItem = items[i];
+                    if (item.type) {
+                        let file = item.getAsFile();
+                        if (file) {
+                            result.push(file);
+                        }
+                    }
+                }
+            }
+        }
+
+        return result;
+    }
+}