Bootstrap ng2-file-upload with SystemJS

electricBonfire · Jun 12, 2016 · 57b00cd · 57b00cd
1 parent 52fae50
commit 57b00cd
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# angular2-quickstart
+# ng2-file-upload SystemJS Loading Example
 
-This tiny repo is done according to angular2 quickstart guide
-just to show how simple it is to use angular2 with 3rd party ng2-* modules
-like this one: https://github.com/valor-software/ng2-bootstrap
+This tiny repo is a fork of https://github.com/valor-software/angular2-quickstart and shows how to load ng2-file-upload using SystemJS
+
+https://github.com/valor-software/ng2-file-upload/
 
 # Quick start
 

diff --git a/app/app.component.ts b/app/app.component.ts
@@ -1,16 +1,136 @@
 import {Component} from '@angular/core';
 import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
+import {FileUploader, FILE_UPLOAD_DIRECTIVES}   from 'ng2-file-upload';
 
 @Component({
   selector: 'my-app',
-  directives: [AlertComponent, DATEPICKER_DIRECTIVES],
+  directives: [AlertComponent, DATEPICKER_DIRECTIVES, FILE_UPLOAD_DIRECTIVES],
   template: `
     <alert type="info">ng2-bootstrap hello world!</alert>
       <pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
       <h4>Inline</h4>
       <div style="display:inline-block; min-height:290px;">
         <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
       </div>
+
+      <style>
+    .my-drop-zone { border: dotted 3px lightgray; }
+    .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
+    .another-file-over-class { border: dotted 3px green; }
+
+    html, body { height: 100%; }
+</style>
+
+<div class="container">
+
+    <div class="navbar navbar-default">
+        <div class="navbar-header">
+            <a class="navbar-brand" href>Angular2 File Upload</a>
+        </div>
+    </div>
+
+    <div class="row">
+
+        <div class="col-md-3">
+
+            <h3>Select files</h3>
+
+            <div ng2FileDrop
+                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
+                 (fileOver)="fileOverBase($event)"
+                 [uploader]="uploader"
+                 class="well my-drop-zone">
+                Base drop zone
+            </div>
+
+            <div ng2FileDrop
+                 [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
+                 (fileOver)="fileOverAnother($event)"
+                 [uploader]="uploader"
+                 class="well my-drop-zone">
+                Another drop zone
+            </div>
+
+            Multiple
+            <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>
+
+            Single
+            <input type="file" ng2FileSelect [uploader]="uploader" />
+        </div>
+
+        <div class="col-md-9" style="margin-bottom: 40px">
+
+            <h3>Upload queue</h3>
+            <p>Queue length: </p>
+
+            <table class="table">
+                <thead>
+                <tr>
+                    <th width="50%">Name</th>
+                    <th>Size</th>
+                    <th>Progress</th>
+                    <th>Status</th>
+                    <th>Actions</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let item of uploader.queue">
+                    <td><strong></strong></td>
+                    <td *ngIf="uploader.isHTML5" nowrap>0.00 MB</td>
+                    <td *ngIf="uploader.isHTML5">
+                        <div class="progress" style="margin-bottom: 0;">
+                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
+                        </div>
+                    </td>
+                    <td class="text-center">
+                        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
+                        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
+                        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
+                    </td>
+                    <td nowrap>
+                        <button type="button" class="btn btn-success btn-xs"
+                                (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
+                            <span class="glyphicon glyphicon-upload"></span> Upload
+                        </button>
+                        <button type="button" class="btn btn-warning btn-xs"
+                                (click)="item.cancel()" [disabled]="!item.isUploading">
+                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
+                        </button>
+                        <button type="button" class="btn btn-danger btn-xs"
+                                (click)="item.remove()">
+                            <span class="glyphicon glyphicon-trash"></span> Remove
+                        </button>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <div>
+                <div>
+                    Queue progress:
+                    <div class="progress" style="">
+                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
+                    </div>
+                </div>
+                <button type="button" class="btn btn-success btn-s"
+                        (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
+                    <span class="glyphicon glyphicon-upload"></span> Upload all
+                </button>
+                <button type="button" class="btn btn-warning btn-s"
+                        (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
+                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
+                </button>
+                <button type="button" class="btn btn-danger btn-s"
+                        (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
+                    <span class="glyphicon glyphicon-trash"></span> Remove all
+                </button>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
   `,
 })
 export class AppComponent {
@@ -30,4 +150,16 @@ export class AppComponent {
   public getDate():number {
     return this.dt && this.dt.getTime() || new Date().getTime();
   }
-}
+
+  public uploader:FileUploader = new FileUploader({url: URL});
+  public hasBaseDropZoneOver:boolean = false;
+  public hasAnotherDropZoneOver:boolean = false;
+
+  public fileOverBase(e:any):void {
+    this.hasBaseDropZoneOver = e;
+  }
+
+  public fileOverAnother(e:any):void {
+    this.hasAnotherDropZoneOver = e;
+  }
+}
diff --git a/index.html b/index.html
@@ -15,16 +15,22 @@
   <script src="node_modules/rxjs/bundles/Rx.min.js"></script>
 
   <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
+
   <!-- 2. Configure SystemJS -->
   <script>
     System.config({
       packages: {
         app: {
           format: 'register',
           defaultExtension: 'js'
-        }
+        },
+        'node_modules/ng2-file-upload': {
+              format: 'cjs',
+              defaultExtension: 'js'
+         }
       },
       map: {
+       'ng2-file-upload': 'node_modules/ng2-file-upload/ng2-file-upload.js',
         moment: 'node_modules/moment/moment.js',
         "@angular/core": "node_modules/@angular/core/core.umd.js",
         "@angular/common": "node_modules/@angular/common/common.umd.js",
@@ -36,8 +42,11 @@
 //        "@angular/platform-browser/src/animate/animation_builder": "node_modules/@angular/platform-browser/src/animate/animation_builder.js"
       }
     });
-    System.import('app/boot')
-      .then(null, console.error.bind(console));
+
+    System.import('/node_modules/ng2-file-upload/ng2-file-upload').then(function(){
+        System.import('app/boot');
+    }, console.error.bind(console));
+
   </script>
 
 </head>
@@ -47,4 +56,4 @@
 <my-app>Loading...</my-app>
 </body>
 
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "bootstrap": "^3.3.6",
     "es6-shim": "0.35.0",
     "ng2-bootstrap": "1.0.17",
+    "ng2-file-upload": "^1.0.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.29",