Merge branch 'JuergenGutsch-feature/#51'

Author: Sergey Akopkokhyants

README.md

@@ -679,10 +679,96 @@ class Widget {
 }
 ```
 
+# Retreiving files in a drop zone
+
+Sinze it is possible to drag and drop one or more files to a drop zone, you need to handle the incomming files.
+
+```js
+import {Component} from '@angular/core';
+import {Http, Headers} from '@angular/http';
+import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
+bootstrap(AppComponent, [
+    DND_PROVIDERS // It is required to have 1 unique instance of your service
+]);
+
+@Component({
+    selector: 'app',
+    directives: [DND_DIRECTIVES],
+    template: `
+<h4>Simple Drag-and-Drop</h4>
+<div class="row">
+   
+    <div class="col-sm-3">
+        <div dnd-droppable class="panel panel-info"
+            (onDropSuccess)="transferDataSuccess($event)">>
+            <div class="panel-heading">Place to drop</div>
+            <div class="panel-body">
+            </div>
+        </div>
+    </div>
+</div>
+`
+})
+export class AppComponent {
+
+  constructor(private _http: Http) { }
+
+   /**
+   * The $event is a structure:
+   * {
+   *   dragData: any,
+   *   mouseEvent: MouseEvent
+   * }
+   */
+  transferDataSuccess($event) {
+    // let attachmentUploadUrl = 'assets/data/offerspec/offerspec.json';
+    // loading the FileList from the dataTransfer
+    let dataTransfer: DataTransfer = $event.mouseEvent.dataTransfer;
+    if (dataTransfer && dataTransfer.files) {
+      
+      // needed to support posting binaries and usual form values
+      let headers = new Headers();
+      headers.append('Content-Type', 'multipart/form-data');
+
+      let files: FileList = dataTransfer.files;
+  
+      // uploading the files one by one asynchrounusly
+      for (let i = 0; i < files.length; i++) {
+        let file: File = files[i];
+  
+        // just for debugging
+        console.log('Name: ' + file.name + '\n Type: ' + file.type + '\n Size: ' + file.size + '\n Date: ' + file.lastModifiedDate);
+  
+        // collecting the data to post
+        var data = new FormData();
+        data.append('file', file);
+        data.append('fileName', file.name);
+        data.append('fileSize', file.size);
+        data.append('fileType', file.type);
+        data.append('fileLastMod', file.lastModifiedDate);
+  
+        // posting the data
+        this._http
+          .post(attachmentUploadUrl, data, {
+            headers: headers
+          })
+          .toPromise()
+          .catch(reason => {
+            console.log(JSON.stringify(reason));
+          });
+      }
+    }
+  }
+}
+```
+
 # Credits
 - [Francesco Cina](https://github.com/ufoscout)
 - [Valerii Kuznetsov](https://github.com/solival)
 - [Shane Oborn](https://github.com/obosha)
+- [Juergen Gutsch](https://github.com/JuergenGutsch)
 
 # License
  [MIT](/LICENSE)

src/abstract.component.ts

@@ -200,15 +200,15 @@ export abstract class AbstractComponent {
     //****** Droppable *******//
     private _onDragEnter(event: Event): void {
         // console.log('ondragenter._isDropAllowed', this._isDropAllowed);
-        if (this._isDropAllowed) {
+        if (this._isDropAllowed(event)) {
             // event.preventDefault();
             this._onDragEnterCallback(event);
         }
     }
 
     private _onDragOver(event: Event) {
         // // console.log('ondragover._isDropAllowed', this._isDropAllowed);
-        if (this._isDropAllowed) {
+        if (this._isDropAllowed(event)) {
             // The element is over the same source element - do nothing
             if (event.preventDefault) {
                 // Necessary. Allows us to drop.
@@ -218,36 +218,29 @@ export abstract class AbstractComponent {
             this._onDragOverCallback(event);
         }
     }
-
+    
     private _onDragLeave(event: Event): void {
         // console.log('ondragleave._isDropAllowed', this._isDropAllowed);
-        if (this._isDropAllowed) {
+        if (this._isDropAllowed(event)) {
             // event.preventDefault();
             this._onDragLeaveCallback(event);
         }
     }
 
     private _onDrop(event: Event): void {
+        // Necessary. Allows us to drop.
+        this._preventAndStop(event);
         // console.log('ondrop._isDropAllowed', this._isDropAllowed);
-        if (this._isDropAllowed) {
-            if (event.preventDefault) {
-                // Necessary. Allows us to drop.
-                event.preventDefault();
-            }
-
-            if (event.stopPropagation) {
-                // Necessary. Allows us to drop.
-                event.stopPropagation();
-            }
+        if (this._isDropAllowed(event)) {            
 
             this._onDropCallback(event);
 
             this.detectChanges();
         }
     }
 
-    private get _isDropAllowed(): boolean {
-        if (this._dragDropService.isDragged && this.dropEnabled) {
+    private _isDropAllowed(event: any): boolean {
+        if ((this._dragDropService.isDragged || (event.dataTransfer && event.dataTransfer.files)) && this.dropEnabled) {
             // First, if `allowDrop` is set, call it to determine whether the
             // dragged element can be dropped here.
             if (this.allowDrop) {
@@ -268,6 +261,15 @@ export abstract class AbstractComponent {
         return false;
     }
 
+    private _preventAndStop(event: Event): any {
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+    }
+
     //*********** Draggable **********//
 
     private _onDragStart(event: Event): void {

src/droppable.component.ts

@@ -78,7 +78,8 @@ export class DroppableComponent extends AbstractComponent {
     };
 
     _onDropCallback (event: MouseEvent) {
-        if (this._dragDropService.isDragged) {
+        let dataTransfer = (event as any).dataTransfer;
+        if (this._dragDropService.isDragged || (dataTransfer && dataTransfer.files)) {
             this.onDropSuccess.emit({dragData: this._dragDropService.dragData, mouseEvent: event});
             if (this._dragDropService.onDragSuccessCallback) {
                 this._dragDropService.onDragSuccessCallback.emit({dragData: this._dragDropService.dragData, mouseEvent: event});