Simple ng2 file uploader

demo-shell-ng2/app/app.component.html

@@ -17,7 +17,7 @@
                     <a [routerLink]="['Home']">Home <span class="sr-only">(current)</span></a>
                 </li>
                 <li [class.active]="isActive(['Page1'])">
-                    <a [routerLink]="['Page1']">Page 1</a>
+                    <a [routerLink]="['Page1']">Uploader</a>
                 </li>
                 <li [class.active]="isActive(['Page2'])">
                     <a [routerLink]="['Page2']">Page 2</a>

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

@@ -1,14 +1,43 @@
 import {Component} from "angular2/core";
+import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
+
 @Component({
     selector: 'page1-view',
     template: `
         <div class="container">
             <div class="row">
-                <h2>Page 1</h2>
+                <h2>Upload File</h2>
+            </div>
+            <div class="row">
+                <input type="file" 
+                       [ng-file-select]="options"
+                       (onUpload)="handleUpload($event)">
+                <div>
+                    Response: {{ uploadFile | json }}
+                </div>
             </div>
         </div>
     `,
-    directives: []
+    directives: [UPLOAD_DIRECTIVES]
 })
 export class Page1View {
+    uploadFile: any;
+    options: Object = {
+        url: 'http://192.168.99.100:8080/alfresco/service/api/upload',
+        withCredentials: true,
+        authToken: btoa('admin:admin'),
+        authTokenPrefix: 'Basic',
+        fieldName: 'filedata',
+        formFields: {
+            siteid: 'swsdp',
+            containerid: 'documentLibrary'
+        }
+    };
+
+    handleUpload(data): void {
+        if (data && data.response) {
+            data = JSON.parse(data.response);
+            this.uploadFile = data;
+        }
+    }
 }

demo-shell-ng2/index.html

@@ -21,16 +21,25 @@
     <script src="node_modules/angular2/bundles/router.dev.js"></script>
     <script src="node_modules/angular2/bundles/http.dev.js"></script>
 
+    <!--<script src="node_modules/ng2-uploader/bundles/ng2-uploader.js"></script>-->
+
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
         System.config({
+            map: {
+                'ng2-uploader': 'node_modules/ng2-uploader'
+            },
             packages: {
                 app: {
                     format: 'register',
                     defaultExtension: 'js'
+                },
+                'ng2-uploader': {
+                    format: 'register',
+                    defaultExtension: 'js'
                 }
             }
         });

demo-shell-ng2/package.json

@@ -16,6 +16,7 @@
     "es6-shim": "^0.35.0",
     "font-awesome": "^4.5.0",
     "jquery": "^2.2.2",
+    "ng2-uploader": "denisvuyka/ng2-uploader",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "systemjs": "0.19.26",