diff --git a/README.md b/README.md
index 955ca314..5500486f 100644
--- a/README.md
+++ b/README.md
@@ -1,335 +1,176 @@
 # ngx-uploader
 
-For demos please see [demos page](http://ngx-uploader.com).
+Angular 2+ File Uploader
 
-## Angular2 File Uploader
+http://ngx-uploader.com
 
-### Installation
+*This module has been completely rewritten from scratch with the version `3.0.0`.*
 
-```
-npm install ngx-uploader --save
-```
-
-### API Docs
-
-[http://docs.ngx-uploader.com](http://docs.ngx-uploader.com)
+If you are looking for documentation for version prior to `3.0.0`, please check [2.x.x](https://github.com/jkuri/ngx-uploader/tree/2.x.x) branch.
 
-### Examples
+## Installation
 
-- [Basic Example](https://github.com/jkuri/ngx-uploader#basic-example)
-- [Advanced Example](https://github.com/jkuri/ngx-uploader#advanced-example)
-- [Advanced Example with plain JSON](https://github.com/jkuri/ngx-uploader#advanced-example-json)
+1. Add `ngx-uploader` module as dependency to your project.
 
---------
+```
+yarn add ngx-uploader
+```
 
-#### Basic Example
+2. Include `NgUploaderModule` into your main AppModule or in module where you will use it.
 
-````ts
+```
 // app.module.ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import { NgUploaderModule } from 'ngx-uploader';
-...
+
 @NgModule({
-  ...
   imports: [
+    BrowserModule,
     NgUploaderModule
   ],
-  ...
+  declarations: [ AppComponent ],
+  exports: [ AppComponent ]
 })
+export class AppModule {}
+```
 
-// demo.component.ts
-import { Component, NgZone, Inject } from '@angular/core';
-import { NgUploaderOptions } from 'ngx-uploader';
-
-@Component({
-  selector: 'demo',
-  templateUrl: 'demo.component.html'
-})
-export class DemoComponent {
-  options: NgUploaderOptions;
-  response: any;
-  hasBaseDropZoneOver: boolean;
-
-  constructor(@Inject(NgZone) private zone: NgZone) {
-    this.options = new NgUploaderOptions({
-      url: 'http://api.ngx-uploader.com/upload',
-      autoUpload: true,
-      calculateSpeed: true
-    });
-  }
-
-  handleUpload(data: any) {
-    setTimeout(() => {
-      this.zone.run(() => {
-        this.response = data;
-        if (data && data.response) {
-          this.response = JSON.parse(data.response);
-        }
-      });
-    });
-  }
-
-  fileOverBase(e: boolean) {
-    this.hasBaseDropZoneOver = e;
-  }
-}
-````
-
-````html
-<!-- demo.component.html -->
-<input type="file"
-       ngFileSelect
-       [options]="options"
-       (onUpload)="handleUpload($event)"
-       (beforeUpload)="beforeUpload($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: {{ response | json }}
-</div>
-````
-
-#### Advanced Example
+## Data Structures of Events and Uploaded Files
 
 ```ts
-// advanced-demo.component.ts
-import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
-import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';
-
-@Component({
-  selector: 'advanced-demo',
-  templateUrl: 'advanced-demo.component.html'
-})
-export class AdvancedDemoComponent {
-  options: NgUploaderOptions;
-  response: any;
-  sizeLimit: number = 1000000; // 1MB
-  previewData: any;
-  errorMessage: string;
-  inputUploadEvents: EventEmitter<string>;
-
-  constructor(@Inject(NgZone) private zone: NgZone) {
-    this.options = new NgUploaderOptions({
-      url: 'http://api.ngx-uploader.com/upload',
-      filterExtensions: true,
-      allowedExtensions: ['jpg', 'png'],
-      maxSize: 2097152,
-      data: { userId: 12 },
-      autoUpload: false,
-      fieldName: 'file',
-      fieldReset: true,
-      maxUploads: 2,
-      method: 'POST',
-      previewUrl: true,
-      withCredentials: false
-    });
-
-    this.inputUploadEvents = new EventEmitter<string>();
-  }
-
-  startUpload() {
-    this.inputUploadEvents.emit('startUpload');
-  }
+export interface UploadProgress {
+  status: UploadStatus; // current status of upload for specific file (Queue | Uploading | Done | Canceled)
+  data?: {
+    percentage: number; // percentage of upload already completed
+    speed: number; // current upload speed per second in bytes
+    speedHuman: string; // current upload speed per second in human readable form
+  };
+}
 
-  beforeUpload(uploadingFile: UploadedFile): void {
-    if (uploadingFile.size > this.sizeLimit) {
-      uploadingFile.setAbort();
-      this.errorMessage = 'File is too large!';
-    }
-  }
+export interface UploadFile {
+  id: string; // unique id of uploaded file instance
+  fileIndex: number; // fileIndex in internal ngx-uploader array of files
+  lastModifiedDate: Date; // last modify date of the file (Date object)
+  name: string; // original name of the file
+  size: number; // size of the file in bytes
+  type: string; // mime type of the file
+  progress: UploadProgress;
+  response?: any; // response when upload is done (parsed JSON or string)
+}
 
-  handleUpload(data: any) {
-    setTimeout(() => {
-      this.zone.run(() => {
-        this.response = data;
-        if (data && data.response) {
-          this.response = JSON.parse(data.response);
-        }
-      });
-    });
-  }
+// output events emitted by ngx-uploader
+export interface UploadOutput {
+  type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'removed' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop';
+  file?: UploadFile;
+}
 
-  handlePreviewData(data: any) {
-    this.previewData = data;
-  }
+// input events that user can emit to ngx-uploader
+export interface UploadInput {
+  type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll';
+  url?: string; // URL to upload file to
+  method?: string; // method (POST | PUT)
+  id?: string; // unique id of uploaded file
+  fileIndex?: number; // fileIndex in internal ngx-uploader array of files
+  file?: UploadFile; // uploading file
+  data?: { [key: string]: string | Blob }; // custom data sent with the file
+  headers?: { [key: string]: string }; // custom headers
+  concurrency?: number; // concurrency of how many files can be uploaded in parallel (default is 0 which means unlimited)
 }
 ```
 
-```html
-<!-- advanced-demo.component.html -->
-<div class="button-container">
-  <label class="upload-button is-pulled-left">
-    <input type="file"
-           class="hidden"
-           ngFileSelect
-           [options]="options"
-           [events]="inputUploadEvents"
-           (onUpload)="handleUpload($event)"
-           (onPreviewData)="handlePreviewData($event)"
-           (beforeUpload)="beforeUpload($event)">
-    Browse
-  </label>
-</div>
-
-<p>
-  Allowed extensions: <code><b>.jpg</b>, <b>.png</b></code>
-</p>
+## Example
 
-<div>
-  <button type="button" class="start-upload-button" (click)="startUpload()">Start Upload</button>
-</div>
-
-<div *ngIf="response">
-  <pre><code>{{ response | json }}</code></pre>
-</div>
-
-<div *ngIf="errorMessage">
-  <code>{{ errorMessage }}</code>
-</div>
-
-<div *ngIf="previewData && !response">
-  <img [src]="previewData">
-</div>
-```
+*You can always run working example by cloning this repository, building project with `yarn build:prod` and running server with `node ./dist/server.js`.*
 
-#### Advanced Example with plain JSON
+### Component Code
 
 ```ts
-// advanced-demo.component.ts
-import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
-import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';
+import { Component, EventEmitter } from '@angular/core';
+import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from 'ngx-uploader';
 
 @Component({
-  selector: 'advanced-demo',
-  templateUrl: 'advanced-demo.component.html'
+  selector: 'app-home',
+  templateUrl: 'app-home.component.html'
 })
-export class AdvancedDemoComponent {
-  options: NgUploaderOptions;
-  response: any;
-  sizeLimit: number = 1000000; // 1MB
-  previewData: any;
-  errorMessage: string;
-  startUploadEvent: EventEmitter<string>;
-
-  constructor(@Inject(NgZone) private zone: NgZone) {
-    this.options = new NgUploaderOptions({
-      url: 'http://api.ngx-uploader.com/upload',
-      filterExtensions: true,
-      allowedExtensions: ['txt', 'pdf'],
-      maxSize: 2097152,
-      data:{
-        '@type': "File",
-        "title": "My lorem.txt file",
-        "file": {
-          "data": "TG9yZW0gSXBzdW0u",
-          "encoding": "base64",
-          "filename": "lorem.txt",
-          "content-type": "text/plain"
-          }
-        },
-       customHeaders: {
-         'Content-Type':'application/json',
-         'Accept':'application/json'
-      },
-      autoUpload: false,
-      plainJson: true,
-      fieldName: 'file',
-      fieldReset: true,
-      maxUploads: 2,
-      method: 'POST',
-      previewUrl: true,
-      withCredentials: false
-    });
-
-    this.startUploadEvent = new EventEmitter<string>();
+export class AppHomeComponent {
+  formData: FormData;
+  files: UploadFile[];
+  uploadInput: EventEmitter<UploadInput>;
+  humanizeBytes: Function;
+  dragOver: boolean;
+
+  constructor() {
+    this.files = []; // local uploading files array
+    this.uploadInput = new EventEmitter<UploadInput>(); // input events, we use this to emit data to ngx-uploader
+    this.humanizeBytes = humanizeBytes;
   }
 
-  startUpload() {
-    this.startUploadEvent.emit("startUpload");
+  onUploadOutput(output: UploadOutput): void {
+    console.log(output); // lets output to see what's going on in the console
+
+    if (output.type === 'allAddedToQueue') { // when all files added in queue
+      // uncomment this if you want to auto upload files when added
+      // const event: UploadInput = {
+      //   type: 'uploadAll',
+      //   url: '/upload',
+      //   method: 'POST',
+      //   data: { foo: 'bar' },
+      //   concurrency: 0
+      // };
+      // this.uploadInput.emit(event);
+    } else if (output.type === 'addedToQueue') {
+      this.files.push(output.file); // add file to array when added
+    } else if (output.type === 'uploading') {
+      // update current data in files array for uploading file
+      const index = this.files.findIndex(file => file.id === output.file.id);
+      this.files[index] = output.file;
+    } else if (output.type === 'removed') {
+      // remove file from array when removed
+      this.files = this.files.filter((file: UploadFile) => file !== output.file);
+    } else if (output.type === 'dragOver') { // drag over event
+      this.dragOver = true;
+    } else if (output.type === 'dragOut') { // drag out event
+      this.dragOver = false;
+    } else if (output.type === 'drop') { // on drop event
+      this.dragOver = false;
+    }
   }
 
-  beforeUpload(ev : Event): void {
-   
-    let file: File =  ev.target['files'][0];
-    let myReader: FileReader = new FileReader();
-
-    myReader.onloadend = (e) => {
-      let tmpB64String = myReader.result.split(',');
-      this.options['data']['file']['data'] = tmpB64String[1] ;
-      this.options['data']['file']['filename'] = file.name;
-      this.options['data']['title'] = file.name;   
+  startUpload(): void {  // manually start uploading
+    const event: UploadInput = {
+      type: 'uploadAll',
+      url: '/upload',
+      method: 'POST',
+      data: { foo: 'bar' },
+      concurrency: 1 // set sequential uploading of files with concurrency 1
     }
-    myReader.readAsDataURL(file);
-  }
 
-  handleUpload(data: any) {
-    setTimeout(() => {
-      this.zone.run(() => {
-        this.response = data;
-        if (data && data.response) {
-          this.response = JSON.parse(data.response);
-        }
-      });
-    });
+    this.uploadInput.emit(event);
   }
 
-  handlePreviewData(data: any) {
-    this.previewData = data;
+  cancelUpload(id: string): void {
+    this.uploadInput.emit({ type: 'cancel', id: id });
   }
 }
 ```
 
-```html
-<!-- advanced-demo.component.html -->
-<div class="button-container">
-  <label class="upload-button is-pulled-left">
-    <input type="file"
-           class="hidden"
-           ngFileSelect
-           [options]="options"
-           [events]="startUploadEvent"
-           (onUpload)="handleUpload($event)"
-           (onPreviewData)="handlePreviewData($event)"
-           (beforeUpload)="beforeUpload($event)">
-    Browse
-  </label>
-</div>
+### Template Code
 
-<p>
-  Allowed extensions: <code><b>.jpg</b>, <b>.png</b></code>
-</p>
+For whole template code please check [here](https://github.com/jkuri/ngx-uploader/tree/master/src/app/components/app-home/app-home.component.html).
 
-<div>
-  <button type="button" class="start-upload-button" (click)="startUpload()">Start Upload</button>
+<div class="drop-container" ngFileDrop (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
+  <h1>Drag & Drop</h1>
 </div>
 
-<div *ngIf="response">
-  <pre><code>{{ response | json }}</code></pre>
-</div>
-
-<div *ngIf="errorMessage">
-  <code>{{ errorMessage }}</code>
-</div>
-
-<div *ngIf="previewData && !response">
-  <img [src]="previewData">
-</div>
-```
----------
-
-### Demos
+<label class="upload-button">
+  <input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
+  or choose file(s)
+</label>
 
-For more information, examples and usage examples please see [demos](http://ngx-uploader.com)
+<button type="button" class="start-upload-btn" (click)="startUpload()">
+  Start Upload
+</button>
 
-#### LICENCE
+### LICENCE
 
 MIT
diff --git a/index.ts b/index.ts
index f588cc36..b8bb672b 100644
--- a/index.ts
+++ b/index.ts
@@ -1,3 +1,4 @@
 export * from './src/ngx-uploader/module/ngx-uploader.module';
-export * from './src/ngx-uploader/services/ngx-uploader';
-export * from './src/ngx-uploader/directives/ng-file-select';
+export * from './src/ngx-uploader/classes/ngx-uploader.class';
+export * from './src/ngx-uploader/directives/ng-file-select.directive';
+export * from './src/ngx-uploader/directives/ng-file-drop.directive';
diff --git a/src/app/components/app-home/app-home.component.html b/src/app/components/app-home/app-home.component.html
index e42b8901..8150847f 100644
--- a/src/app/components/app-home/app-home.component.html
+++ b/src/app/components/app-home/app-home.component.html
@@ -3,14 +3,16 @@
     <div class="container">
       <div class="columns is-multiline">
         <div class="column is-6 is-offset-3">
-          <div class="drop-container">
+          <div class="drop-container" ngFileDrop (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
             <h1>Drag & Drop</h1>
-            <label class="upload-button">
-              <input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
-              or choose file(s)
-            </label>
           </div>
         </div>
+        <div class="column is-6 is-offset-3">
+          <label class="upload-button">
+            <input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
+            or choose file(s)
+          </label>
+        </div>
         <div class="column is-6 is-offset-3">
           <div class="columns">
             <div class="column is-4 centered">
diff --git a/src/app/components/app-home/app-home.component.ts b/src/app/components/app-home/app-home.component.ts
index 8d3c2fb0..f3c2318e 100644
--- a/src/app/components/app-home/app-home.component.ts
+++ b/src/app/components/app-home/app-home.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter } from '@angular/core';
-import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from '../../../ngx-uploader/services/ngx-uploader';
+import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from '../../../../';
 
 interface FormData {
   concurrency: number;
@@ -14,8 +14,9 @@ interface FormData {
 export class AppHomeComponent {
   formData: FormData;
   files: UploadFile[];
-  uploadInput: EventEmitter<any>;
+  uploadInput: EventEmitter<UploadInput>;
   humanizeBytes: Function;
+  dragOver: boolean;
 
 
   constructor() {
@@ -26,7 +27,7 @@ export class AppHomeComponent {
     };
 
     this.files = [];
-    this.uploadInput = new EventEmitter<any>();
+    this.uploadInput = new EventEmitter<UploadInput>();
     this.humanizeBytes = humanizeBytes;
   }
 
@@ -35,7 +36,6 @@ export class AppHomeComponent {
 
     if (output.type === 'allAddedToQueue') {
       if (this.formData.autoUpload) {
-        console.log('yes');
         const event: UploadInput = {
           type: 'uploadAll',
           url: '/upload',
@@ -53,6 +53,12 @@ export class AppHomeComponent {
       this.files[index] = output.file;
     } else if (output.type === 'removed') {
       this.files = this.files.filter((file: UploadFile) => file !== output.file);
+    } else if (output.type === 'dragOver') {
+      this.dragOver = true;
+    } else if (output.type === 'dragOut') {
+      this.dragOver = false;
+    } else if (output.type === 'drop') {
+      this.dragOver = false;
     }
   }
 
diff --git a/src/index.html b/src/index.html
index b0be9f27..51c0d8b3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Angular Webpack Seed</title>
+  <title>ngx-uploader - Angular2+ File Uploader</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
diff --git a/src/ngx-uploader/services/ngx-uploader.ts b/src/ngx-uploader/classes/ngx-uploader.class.ts
similarity index 87%
rename from src/ngx-uploader/services/ngx-uploader.ts
rename to src/ngx-uploader/classes/ngx-uploader.class.ts
index 6f01b9d2..32cc335c 100644
--- a/src/ngx-uploader/services/ngx-uploader.ts
+++ b/src/ngx-uploader/classes/ngx-uploader.class.ts
@@ -1,4 +1,4 @@
-import { EventEmitter, Injectable, Provider } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { Subscriber } from 'rxjs/Subscriber';
@@ -30,17 +30,18 @@ export interface UploadFile {
   name: string;
   size: number;
   type: string;
-  progress: UploadProgress
+  progress: UploadProgress;
+  response?: any;
 }
 
 export interface UploadOutput {
-  type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'removed' | 'start' | 'cancelled';
+  type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'removed' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop';
   file?: UploadFile;
 }
 
 export interface UploadInput {
   type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll';
-  url: string;
+  url?: string;
   method?: string;
   id?: string;
   fileIndex?: number;
@@ -62,7 +63,6 @@ export function humanizeBytes(bytes: number): string {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
-@Injectable()
 export class NgUploaderService {
   fileList: FileList;
   files: UploadFile[];
@@ -75,8 +75,9 @@ export class NgUploaderService {
     this.uploads = [];
   }
 
-  handleFiles = (files: FileList) => {
+  handleFiles(files: FileList): void {
     this.fileList = files;
+
     this.files = [].map.call(files, (file: File, i: number) => {
       const uploadFile: UploadFile = {
         fileIndex: i,
@@ -100,7 +101,7 @@ export class NgUploaderService {
     });
 
     this.serviceEvents.emit({ type: 'allAddedToQueue' });
-  };
+  }
 
   initInputEvents(input: EventEmitter<UploadInput>): void {
     input.subscribe((event: UploadInput) => {
@@ -188,21 +189,34 @@ export class NgUploaderService {
         }
       }, false);
 
-      xhr.upload.addEventListener('load', (e: Event) => {
-        file.progress = {
-          status: UploadStatus.Done,
-          data: {
-            percentage: 100,
-            speed: null,
-            speedHuman: null
+      xhr.upload.addEventListener('error', (e: Event) => {
+        observer.error(e);
+        observer.complete();
+      });
+
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          file.progress = {
+            status: UploadStatus.Done,
+            data: {
+              percentage: 100,
+              speed: null,
+              speedHuman: null
+            }
+          };
+
+          try {
+            file.response = JSON.parse(xhr.response);
+          } catch (e) {
+            file.response = xhr.response;
           }
-        };
 
-        observer.next({ type: 'done', file: file });
-        observer.complete();
-      }, false);
+          observer.next({ type: 'done', file: file });
+          observer.complete();
+        }
+      };
 
-      xhr.open(method, url);
+      xhr.open(method, url, true);
 
       const form = new FormData();
       try {
@@ -234,7 +248,3 @@ export class NgUploaderService {
     return Math.random().toString(36).substring(7);
   }
 }
-
-export const NgUploaderServiceProvider: Provider = {
-  provide: NgUploaderService, useClass: NgUploaderService
-};
diff --git a/src/ngx-uploader/directives/ng-file-drop.directive.ts b/src/ngx-uploader/directives/ng-file-drop.directive.ts
new file mode 100644
index 00000000..988ceac1
--- /dev/null
+++ b/src/ngx-uploader/directives/ng-file-drop.directive.ts
@@ -0,0 +1,84 @@
+import { Directive, ElementRef, EventEmitter, Input, Output, OnInit, OnDestroy, PLATFORM_ID, Inject, HostListener } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { NgUploaderService, UploadOutput, UploadInput, UploadFile } from '../classes/ngx-uploader.class';
+
+@Directive({
+  selector: '[ngFileDrop]'
+})
+export class NgFileDropDirective implements OnInit, OnDestroy {
+  @Input() uploadInput: EventEmitter<UploadInput>;
+  @Output() uploadOutput: EventEmitter<UploadOutput>;
+
+  upload: NgUploaderService;
+  isServer: boolean = isPlatformServer(this.platform_id);
+  el: HTMLInputElement;
+
+  constructor(@Inject(PLATFORM_ID) private platform_id, private elementRef: ElementRef) {
+    this.upload = new NgUploaderService();
+    this.uploadOutput = new EventEmitter<UploadOutput>();
+  }
+
+  ngOnInit() {
+    if (this.isServer) {
+      return;
+    }
+
+    this.el = this.elementRef.nativeElement;
+
+    this.upload.serviceEvents.subscribe((event: UploadOutput) => {
+      this.uploadOutput.emit(event);
+    });
+
+    if (this.uploadInput instanceof EventEmitter) {
+      this.upload.initInputEvents(this.uploadInput);
+    }
+
+    this.el.addEventListener('drop', this.stopEvent, false);
+    this.el.addEventListener('dragenter', this.stopEvent, false);
+    this.el.addEventListener('dragover', this.stopEvent, false);
+    this.el.addEventListener('dragover', this.stopEvent, false);
+  }
+
+  ngOnDestroy() {
+    if (this.isServer) {
+      return;
+    }
+
+    this.uploadInput.unsubscribe();
+  }
+
+  stopEvent = (e: Event) => {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  @HostListener('drop', ['$event'])
+  public onDrop(e: any) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const event: UploadOutput = { type: 'drop' };
+    this.uploadOutput.emit(event);
+    this.upload.handleFiles(e.dataTransfer.files);
+  }
+
+  @HostListener('dragover', ['$event'])
+  public onDragOver(e: Event) {
+    if (!e) {
+      return;
+    }
+
+    const event: UploadOutput = { type: 'dragOver' };
+    this.uploadOutput.emit(event);
+  }
+
+  @HostListener('dragleave', ['$event'])
+  public onDragLeave(e: Event) {
+    if (!e) {
+      return;
+    }
+
+    const event: UploadOutput = { type: 'dragOut' };
+    this.uploadOutput.emit(event);
+  }
+}
diff --git a/src/ngx-uploader/directives/ng-file-drop.ts b/src/ngx-uploader/directives/ng-file-drop.ts
deleted file mode 100644
index 732fec7d..00000000
--- a/src/ngx-uploader/directives/ng-file-drop.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-// import {
-//   Directive,
-//   ElementRef,
-//   EventEmitter,
-//   Input,
-//   Output,
-//   HostListener,
-//   Inject,
-//   OnChanges,
-//   OnInit,
-//   SimpleChange
-// } from '@angular/core';
-// import {NgUploaderService} from '../services/ngx-uploader';
-// import {NgUploaderOptions, UploadedFile, UploadRejected} from '../classes/index';
-
-// @Directive({
-//   selector: '[ngFileDrop]',
-//   providers: [
-//     NgUploaderService
-//   ]
-// })
-// export class NgFileDropDirective implements OnChanges, OnInit {
-//   @Input() options: NgUploaderOptions;
-//   @Input() events: EventEmitter<any>;
-//   @Output() onUpload: EventEmitter<any> = new EventEmitter();
-//   @Output() onPreviewData: EventEmitter<any> = new EventEmitter();
-//   @Output() onFileOver: EventEmitter<any> = new EventEmitter();
-//   @Output() onUploadRejected: EventEmitter<UploadRejected> = new EventEmitter<UploadRejected>();
-//   @Output() beforeUpload: EventEmitter<UploadedFile> = new EventEmitter<UploadedFile>();
-
-//   files: File[] = [];
-
-//   constructor(@Inject(ElementRef) public el: ElementRef,
-//               @Inject(NgUploaderService) public uploader: NgUploaderService) {
-//   }
-
-//   ngOnInit() {
-//     this.uploader._emitter.subscribe((data: any) => {
-//       this.onUpload.emit(data);
-//       if (data.done && this.files && this.files.length) {
-//         this.files = [].filter.call(this.files, (f: File) => f.name !== data.originalName);
-//       }
-//     });
-
-//     this.uploader._previewEmitter.subscribe((data: any) => {
-//       this.onPreviewData.emit(data);
-//     });
-
-//     this.uploader._beforeEmitter.subscribe((uploadingFile: UploadedFile) => {
-//       this.beforeUpload.emit(uploadingFile);
-//     });
-
-//     setTimeout(() => {
-//       if (this.events instanceof EventEmitter) {
-//         this.events.subscribe((data: string) => {
-//           if (data === 'startUpload') {
-//             this.uploader.uploadFilesInQueue();
-//           }
-//         });
-//       }
-//     });
-
-//     this.initEvents();
-//   }
-
-//   ngOnChanges(changes: { [propName: string]: SimpleChange }) {
-//     if (!this.options || !changes) {
-//       return;
-//     }
-
-//     if (this.options.allowedExtensions) {
-//       this.options.allowedExtensions = this.options.allowedExtensions.map(ext => ext.toLowerCase());
-//     }
-//     this.options = new NgUploaderOptions(this.options);
-//     this.uploader.setOptions(this.options);
-//   }
-
-//   initEvents(): void {
-//     if (typeof this.el.nativeElement.addEventListener === 'undefined') {
-//       return;
-//     }
-
-//     this.el.nativeElement.addEventListener('drop', this.stopEvent, false);
-//     this.el.nativeElement.addEventListener('dragenter', this.stopEvent, false);
-//     this.el.nativeElement.addEventListener('dragover', this.stopEvent, false);
-//   }
-
-//   @HostListener('drop', ['$event']) onDrop(e: Event | any): void {
-//     this.onFileOver.emit(false);
-//     this.files = Array.from<File>(e.dataTransfer.files);
-//     if (!this.files || !this.files.length) {
-//       return;
-//     }
-
-//     if (this.options.filterExtensions && this.options.allowedExtensions && this.files && this.files.length) {
-//       this.files = [].filter.call(this.files, (f: File) => {
-//         let allowedExtensions = this.options.allowedExtensions || [];
-//         if (allowedExtensions.indexOf(f.type.toLowerCase()) !== -1) {
-//           return true;
-//         }
-
-//         let ext = f.name.split('.').pop();
-//         if (ext && allowedExtensions.indexOf(ext.toLowerCase()) !== -1) {
-//           return true;
-//         }
-
-//         this.onUploadRejected.emit({file: f, reason: UploadRejected.EXTENSION_NOT_ALLOWED});
-
-//         return false;
-//       });
-//     }
-
-//     let maxSize = typeof this.options.maxSize !== 'undefined' ? this.options.maxSize : null;
-
-//     if (maxSize !== null && maxSize > 0) {
-//       this.files = [].filter.call(this.files, (f: File) => {
-//         if (maxSize) {
-//           if (f.size <= maxSize) {
-//             return true;
-//           }
-//         }
-
-//         this.onUploadRejected.emit({file: f, reason: UploadRejected.MAX_SIZE_EXCEEDED});
-//         return false;
-//       });
-//     }
-
-//     let maxUploads = typeof this.options.maxUploads !== 'undefined' ? this.options.maxUploads : null;
-
-//     if (maxUploads !== null && (maxUploads > 0 && this.files.length > maxUploads)) {
-//       this.onUploadRejected.emit({file: this.files.pop(), reason: UploadRejected.MAX_UPLOADS_EXCEEDED});
-//       this.files = [];
-//     }
-
-//     if (this.files && this.files.length) {
-//       this.uploader.addFilesToQueue(this.files);
-//     }
-//   }
-
-//   @HostListener('dragover', ['$event'])
-//   public onDragOver(e: any) {
-//     if (!e) {
-//       return;
-//     }
-//     this.onFileOver.emit(true);
-//   }
-
-//   @HostListener('dragleave', ['$event'])
-//   public onDragLeave(e: any) {
-//     if (!e) {
-//       return;
-//     }
-//     this.onFileOver.emit(false);
-//   }
-
-//   private stopEvent(e: Event): void {
-//     e.stopPropagation();
-//     e.preventDefault();
-//   }
-
-// }
diff --git a/src/ngx-uploader/directives/ng-file-select.ts b/src/ngx-uploader/directives/ng-file-select.directive.ts
similarity index 85%
rename from src/ngx-uploader/directives/ng-file-select.ts
rename to src/ngx-uploader/directives/ng-file-select.directive.ts
index 408a2715..4f754b78 100644
--- a/src/ngx-uploader/directives/ng-file-select.ts
+++ b/src/ngx-uploader/directives/ng-file-select.directive.ts
@@ -1,6 +1,6 @@
 import { Directive, ElementRef, EventEmitter, Input, Output, OnInit, OnDestroy, PLATFORM_ID, Inject } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
-import { NgUploaderService, UploadOutput, UploadInput, UploadFile } from '../services/ngx-uploader';
+import { NgUploaderService, UploadOutput, UploadInput, UploadFile } from '../classes/ngx-uploader.class';
 
 @Directive({
   selector: '[ngFileSelect]'
@@ -9,14 +9,12 @@ export class NgFileSelectDirective implements OnInit, OnDestroy {
   @Input() uploadInput: EventEmitter<any>;
   @Output() uploadOutput: EventEmitter<UploadOutput>;
 
+  upload: NgUploaderService;
   isServer: boolean = isPlatformServer(this.platform_id);
   el: HTMLInputElement;
 
-  constructor(
-    @Inject(PLATFORM_ID) private platform_id,
-    private elementRef: ElementRef,
-    private upload: NgUploaderService
-  ) {
+  constructor(@Inject(PLATFORM_ID) private platform_id, private elementRef: ElementRef) {
+    this.upload = new NgUploaderService();
     this.uploadOutput = new EventEmitter<UploadOutput>();
   }
 
diff --git a/src/ngx-uploader/module/ngx-uploader.module.ts b/src/ngx-uploader/module/ngx-uploader.module.ts
index 51dd8660..356de5ec 100644
--- a/src/ngx-uploader/module/ngx-uploader.module.ts
+++ b/src/ngx-uploader/module/ngx-uploader.module.ts
@@ -1,17 +1,15 @@
 import { NgModule } from '@angular/core';
-// import { NgFileDropDirective } from './../directives/ng-file-drop';
-import { NgUploaderServiceProvider } from '../services/ngx-uploader';
-import { NgFileSelectDirective } from './../directives/ng-file-select';
+import { NgFileDropDirective } from '../directives/ng-file-drop.directive';
+import { NgFileSelectDirective } from '../directives/ng-file-select.directive';
 
 @NgModule({
    declarations: [
-     NgFileSelectDirective
+     NgFileSelectDirective,
+     NgFileDropDirective
    ],
    exports: [
-     NgFileSelectDirective
-   ],
-   providers: [
-      NgUploaderServiceProvider
+     NgFileSelectDirective,
+     NgFileDropDirective
    ]
 })
 export class NgUploaderModule {}
diff --git a/src/styles/app.sass b/src/styles/app.sass
index b5f59c69..bb48be5a 100644
--- a/src/styles/app.sass
+++ b/src/styles/app.sass
@@ -9,16 +9,18 @@ html, body
   -webkit-font-smoothing: antialiased
 
 .drop-container
-  padding: 20px 0 60px 0
+  padding: 40px 0
   border: 2px dashed $blue
   border-radius: 10px
-  margin-bottom: 50px
+  margin-bottom: 10px
   margin-top: 20px
   background: lighten($blue, 50)
+  display: flex
+  justify-content: center
+  align-items: center
   h1
     color: $text
     font-size: 28px
-    padding: 20px 0 40px 0
     text-align: center
     font-weight: 600