Add file drag over event emitter on enter and leave (bleenco#90)

* Add file drag over event emitter on enter and leave

* Rename event onFileOver, add drag and drop example in readme file

* Fix example directive name

README.md

@@ -59,6 +59,7 @@ import { Component } from '@angular/core';
 })
 export class DemoApp {
   uploadFile: any;
+  hasBaseDropZoneOver: boolean = false;
   options: Object = {
     url: 'http://localhost:10050/upload'
   };
@@ -69,6 +70,10 @@ export class DemoApp {
       this.uploadFile = data;
     }
   }
+
+  fileOverBase(e:any):void {
+    this.hasBaseDropZoneOver = e;
+  }
 }
 ````
 
@@ -79,6 +84,17 @@ export class DemoApp {
        [options]="options"
        (onUpload)="handleUpload($event)">
 
+<!-- drag & drop file example-->
+<style>
+  .file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
+</style>
+<div ngFileDrop
+     [options]="options"
+     (onUpload)="handleUpload($event)"
+     [ngClass]="{'file-over': hasBaseDropZoneOver}"
+     (onFileOver)="fileOverBase($event)">
+</div>
+
 <div>
 Response: {{ uploadFile | json }}
 </div>

src/directives/ng-file-drop.ts

@@ -12,10 +12,11 @@ import {Ng2Uploader} from '../services/ng2-uploader';
   selector: '[ngFileDrop]'
 })
 export class NgFileDropDirective {
-  
+
   @Input() events: EventEmitter<any>;
   @Output() onUpload: EventEmitter<any> = new EventEmitter();
   @Output() onPreviewData: EventEmitter<any> = new EventEmitter();
+  @Output() onFileOver:EventEmitter<any> = new EventEmitter();
 
    _options:any;
 
@@ -110,4 +111,15 @@ export class NgFileDropDirective {
       this.uploader.addFilesToQueue(this.files);
     }
   }
+
+  @HostListener('dragover', ['$event'])
+  public onDragOver():void {
+    this.onFileOver.emit(true);
+  }
+
+  @HostListener('dragleave', ['$event'])
+  public onDragLeave():any {
+    this.onFileOver.emit(false);
+  }
+
 }