Drag and drop document upload demo (ng2)

demo-shell-ng2/app/components/page1.view.ts

@@ -1,14 +1,25 @@
-import {Component} from "angular2/core";
+import {Component, NgZone} from "angular2/core";
 import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
 
 @Component({
     selector: 'page1-view',
+    styles: [
+        `
+        :host .dropzone {
+            width: 100%;
+            height: 100px;
+            background-color: #f5f5f5;
+            margin-top: 2px;
+            margin-bottom: 2px;
+            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+            text-align: center;
+        }
+        `
+    ],
     template: `
         <div class="container">
             <div class="row">
                 <h2>Upload File</h2>
-            </div>
-            <div class="row">
                 <input type="file" 
                        [ng-file-select]="options"
                        (onUpload)="handleUpload($event)">
@@ -16,6 +27,18 @@ import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
                     Response: {{ uploadFile | json }}
                 </div>
             </div>
+            <div class="row">
+                <h2>Drag and Drop file demo</h2>
+                <div class="col-md-4 col-md-offset-3">
+                    <div [ng-file-drop]="options" (onUpload)="handleDropUpload($event)" class="dropzone">
+                        Drop file here...
+                    </div>
+                    <div class="progress">
+                        <div class="progress-bar" [style.width]="dropProgress + '%'"></div>
+                        <span class="percent">{{ dropProgress }}%</span>
+                    </div>
+                </div>
+            </div>
         </div>
     `,
     directives: [UPLOAD_DIRECTIVES]
@@ -34,10 +57,38 @@ export class Page1View {
         }
     };
 
+    zone: NgZone;
+    dropProgress: number = 0;
+    dropResp: any[] = [];
+
+    constructor() {
+        this.zone = new NgZone({ enableLongStackTrace: false });
+    }
+
     handleUpload(data): void {
         if (data && data.response) {
             data = JSON.parse(data.response);
             this.uploadFile = data;
         }
     }
+
+    handleDropUpload(data): void {
+        let index = this.dropResp.findIndex(x => x.id === data.id);
+        if (index === -1) {
+            this.dropResp.push(data);
+        }
+        else {
+            this.zone.run(() => {
+                this.dropResp[index] = data;
+            });
+        }
+
+        let total = 0, uploaded = 0;
+        this.dropResp.forEach(resp => {
+            total += resp.progress.total;
+            uploaded += resp.progress.loaded;
+        });
+
+        this.dropProgress = Math.floor(uploaded / (total / 100));
+    }
 }