chore(demo): update demo

index.ts

@@ -1,4 +1,5 @@
 export * from './src/ngx-uploader/module/ngx-uploader.module';
 export * from './src/ngx-uploader/classes/ngx-uploader.class';
+export { UploadFile, UploadInput, UploadOutput, UploadProgress, UploadStatus, UploaderOptions } from './src/ngx-uploader/classes/interfaces';
 export * from './src/ngx-uploader/directives/ng-file-select.directive';
 export * from './src/ngx-uploader/directives/ng-file-drop.directive';

src/components/app-home/app-home.component.html

@@ -13,7 +13,17 @@
               </span>
             </div>
             <div class="browser-container">
-              <app-progress-chart [percent]="'20'"></app-progress-chart>
+              <div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver, 'is-hidden': uploading }">
+                <h1>Drag & Drop</h1>
+                <p>
+                  <span>your files here or</span>
+                  <label class="upload-button">
+                    <input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
+                    browse
+                  </label>
+                </p>
+              </div>
+              <app-progress-chart [percent]="percent" *ngIf="uploading" [class.is-hidden]="!uploading"></app-progress-chart>
             </div>
           </div>
         </div>

src/components/app-home/app-home.component.ts

@@ -1,11 +1,5 @@
 import { Component, EventEmitter } from '@angular/core';
-import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions } from '../../../';
-
-interface FormData {
-  concurrency: number;
-  autoUpload: boolean;
-  verbose: boolean;
-}
+import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions, UploadStatus } from '../../../';
 
 @Component({
   selector: 'app-home',
@@ -19,24 +13,17 @@ export class AppHomeComponent {
   dragOver: boolean;
   options: UploaderOptions;
   percent: number;
+  uploading: boolean;
 
   constructor() {
+    this.uploading = false;
     this.options = { concurrency: 1 };
-
-    this.formData = {
-      concurrency: 1,
-      autoUpload: false,
-      verbose: true
-    };
-
     this.files = [];
     this.uploadInput = new EventEmitter<UploadInput>();
     this.humanizeBytes = humanizeBytes;
   }
 
   onUploadOutput(output: UploadOutput): void {
-    console.log(output);
-
     if (output.type === 'allAddedToQueue') {
       const event: UploadInput = {
         type: 'uploadAll',
@@ -49,6 +36,7 @@ export class AppHomeComponent {
     } else if (output.type === 'addedToQueue'  && typeof output.file !== 'undefined') {
       this.files.push(output.file);
     } else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
+      this.uploading = true;
       const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
       this.files[index] = output.file;
     } else if (output.type === 'removed') {
@@ -60,6 +48,22 @@ export class AppHomeComponent {
     } else if (output.type === 'drop') {
       this.dragOver = false;
     }
+
+    let uploadInProgress = false;
+    let percent = 0;
+
+    this.files.forEach(file => {
+      if (file.progress.status !== UploadStatus.Done) {
+        uploadInProgress = true;
+      }
+
+      if (file.progress.data) {
+        percent += file.progress.data.percentage;
+      }
+    });
+
+    this.uploading = uploadInProgress;
+    this.percent = percent / this.files.length;
   }
 
   startUpload(): void {

src/ngx-uploader/classes/interfaces.ts

@@ -0,0 +1,63 @@
+import { Subscription } from 'rxjs/Subscription';
+
+export interface UploaderOptions {
+  concurrency: number;
+}
+
+export interface BlobFile extends Blob {
+  name: string;
+}
+
+export enum UploadStatus {
+  Queue,
+  Uploading,
+  Done,
+  Cancelled
+}
+
+export interface UploadProgress {
+  status: UploadStatus;
+  data?: {
+    percentage: number;
+    speed: number;
+    speedHuman: string;
+    startTime: number | null;
+    endTime: number | null;
+    eta: number | null;
+    etaHuman: string | null;
+  };
+}
+
+export interface UploadFile {
+  id: string;
+  fileIndex: number;
+  lastModifiedDate: Date;
+  name: string;
+  size: number;
+  type: string;
+  form: FormData;
+  progress: UploadProgress;
+  response?: any;
+  responseStatus?: number;
+  sub?: Subscription | any;
+  nativeFile?: File;
+}
+
+export interface UploadOutput {
+  type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop' | 'removed' | 'removedAll';
+  file?: UploadFile;
+  nativeFile?: File;
+}
+
+export interface UploadInput {
+  type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll';
+  url?: string;
+  method?: string;
+  id?: string;
+  fieldName?: string;
+  fileIndex?: number;
+  file?: UploadFile;
+  data?: { [key: string]: string | Blob };
+  headers?: { [key: string]: string };
+  withCredentials?: boolean;
+}

src/ngx-uploader/classes/ngx-uploader.class.ts

@@ -3,68 +3,7 @@ import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/mergeMap';
-
-export interface BlobFile extends Blob {
-  name: string;
-}
-
-export enum UploadStatus {
-  Queue,
-  Uploading,
-  Done,
-  Cancelled
-}
-
-export interface UploaderOptions {
-  concurrency: number;
-}
-
-export interface UploadProgress {
-  status: UploadStatus;
-  data?: {
-    percentage: number;
-    speed: number;
-    speedHuman: string;
-    startTime: number | null;
-    endTime: number | null;
-    eta: number | null;
-    etaHuman: string | null;
-  };
-}
-
-export interface UploadFile {
-  id: string;
-  fileIndex: number;
-  lastModifiedDate: Date;
-  name: string;
-  size: number;
-  type: string;
-  form: FormData;
-  progress: UploadProgress;
-  response?: any;
-  responseStatus?: number;
-  sub?: Subscription | any;
-  nativeFile?: File;
-}
-
-export interface UploadOutput {
-  type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop' | 'removed' | 'removedAll';
-  file?: UploadFile;
-  nativeFile?: File;
-}
-
-export interface UploadInput {
-  type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll';
-  url?: string;
-  method?: string;
-  id?: string;
-  fieldName?: string;
-  fileIndex?: number;
-  file?: UploadFile;
-  data?: { [key: string]: string | Blob };
-  headers?: { [key: string]: string };
-  withCredentials?: boolean;
-}
+import { UploaderOptions, UploadFile, UploadOutput, UploadInput, UploadStatus, BlobFile } from './interfaces';
 
 export function humanizeBytes(bytes: number): string {
   if (bytes === 0) {

src/ngx-uploader/directives/ng-file-drop.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, EventEmitter, Input, Output, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
-import { NgUploaderService, UploadOutput, UploadInput, UploadFile, UploaderOptions } from '../classes/ngx-uploader.class';
+import { UploadOutput, UploadInput, UploadFile, UploaderOptions, NgUploaderService } from '../../../';
 
 @Directive({
   selector: '[ngFileDrop]'

src/ngx-uploader/directives/ng-file-select.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
-import { NgUploaderService, UploadOutput, UploadInput, UploadFile, UploaderOptions } from '../classes/ngx-uploader.class';
+import { UploadOutput, UploadInput, UploadFile, UploaderOptions, NgUploaderService } from '../../../';
 
 @Directive({
   selector: '[ngFileSelect]'