fix(): fix cancel event

henishv · Jun 30, 2017 · 89a3f48 · 89a3f48
1 parent d47c939
commit 89a3f48
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-uploader",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "main": "bundles/ngx-uploader.umd.js",
   "module": "index.js",
   "esnext": "index.js",

diff --git a/src/components/app-home/app-home.component.html b/src/components/app-home/app-home.component.html
@@ -58,9 +58,15 @@ <h1>Drag & Drop</h1>
         </div>
         <div class="column is-10 is-offset-1" *ngIf="files && files.length">
           <div class="upload-file" *ngFor="let f of files; let i = index;">
-            <div class="progress-bar-container">
-              <div class="bar" [style.width]="f.progress.data.percentage + '%'" [ngClass]="{ 'green': f.progress.data.percentage === 100 }"></div>
-            </div>
+            <div class="columns">
+              <div class="column is-11">
+                <div class="progress-bar-container">
+                  <div class="bar" [style.width]="f.progress.data.percentage + '%'" [ngClass]="{ 'green': f.progress.data.percentage === 100 }"></div>
+                </div>
+              </div>
+              <div class="column is-1 centered">
+                <button type="button" class="button" (click)="cancelUpload(f.id)">Cancel</button>
+              </div>
           </div>
         </div>
         <div class="column is-10 is-offset-1" *ngIf="formData.verbose">

diff --git a/src/ngx-uploader/classes/ngx-uploader.class.ts b/src/ngx-uploader/classes/ngx-uploader.class.ts
@@ -2,10 +2,8 @@ import { EventEmitter } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { Subscriber } from 'rxjs/Subscriber';
-import 'rxjs/add/observable/merge';
 import 'rxjs/add/observable/from';
-import 'rxjs/add/operator/mergeAll';
-import 'rxjs/add/operator/combineLatest';
+import 'rxjs/add/operator/merge';
 
 export enum UploadStatus {
   Queue,
@@ -125,19 +123,18 @@ export class NgUploaderService {
         break;
         case 'uploadAll':
           const concurrency = event.concurrency > 0 ? event.concurrency : Number.POSITIVE_INFINITY;
-
-          const subscriber = Subscriber.create((data: UploadOutput) => {
-            this.serviceEvents.emit(data);
-          });
-
           this.uploads = this.uploads.concat(this.files.map(file => {
-            return { file: file, sub: null };
+            return { file: file, sub: { instance: null } };
           }));
 
-          const subscription = Observable.from(this.files.map(file => this.uploadFile(file, event)))
-            .mergeAll(concurrency)
-            .combineLatest(data => data)
-            .subscribe(subscriber);
+          Observable.from(this.files.map(file => this.uploadFile(file, event)))
+            .merge(concurrency)
+            .subscribe((uploadInstance: Observable<UploadOutput>) => {
+              const index = this.uploads.findIndex(u => u.sub.instance === null);
+              this.uploads[index].sub.instance = uploadInstance.subscribe((data: UploadOutput) => {
+                this.serviceEvents.emit(data);
+              });
+            });
         break;
         case 'cancel':
           const id = event.id || null;

diff --git a/src/styles/app.sass b/src/styles/app.sass
@@ -158,3 +158,15 @@ html, body, .hero
 .centered
   display: flex
   align-items: center
+
+.upload-file
+
+  .button
+    background: $white
+    border: none
+    color: $black
+    outline: none
+    padding: 10px 20px
+    border-radius: 4px
+    display: block
+    font-size: 14px