feat(): add cancel functionality (closes #471)

bleenco · Jan 1, 2019 · 1a3a063 · 1a3a063
1 parent b423316
commit 1a3a063
Show file tree

Hide file tree

Showing 9 changed files with 2,351 additions and 2,438 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-uploader-demo",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bleenco/ngx-uploader.git"
@@ -15,7 +15,7 @@
   "homepage": "http://ngx-uploader.com",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --open",
     "build": "ng build",
     "build:prod": "ng build ngx-uploader && ng build ngx-uploader-demo --prod && tsc -p tsconfig.api.json",
     "test": "ng test ngx-uploader",
@@ -25,53 +25,53 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^6.1.1",
-    "@angular/core": "^6.1.1",
-    "@angular/compiler": "^6.1.1",
-    "@angular/animations": "^6.1.1",
-    "@angular/forms": "^6.1.1",
-    "@angular/http": "^6.1.1",
-    "@angular/platform-browser": "^6.1.1",
-    "@angular/platform-browser-dynamic": "^6.1.1",
-    "@angular/router": "^6.1.1",
-    "core-js": "^2.5.7",
-    "rxjs": "^6.2.2",
+    "@angular/common": "^7.1.4",
+    "@angular/core": "^7.1.4",
+    "@angular/compiler": "^7.1.4",
+    "@angular/animations": "^7.1.4",
+    "@angular/forms": "^7.1.4",
+    "@angular/http": "^7.1.4",
+    "@angular/platform-browser": "^7.1.4",
+    "@angular/platform-browser-dynamic": "^7.1.4",
+    "@angular/router": "^7.1.4",
+    "core-js": "^2.6.1",
+    "rxjs": "^6.3.3",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.7.2",
-    "@angular-devkit/build-ng-packagr": "~0.7.2",
-    "@angular/cli": "~6.1.2",
-    "@angular/compiler-cli": "^6.1.1",
-    "@angular/language-service": "^6.1.1",
+    "@angular-devkit/build-angular": "~0.11.4",
+    "@angular-devkit/build-ng-packagr": "~0.11.4",
+    "@angular/cli": "~7.1.4",
+    "@angular/compiler-cli": "^7.1.4",
+    "@angular/language-service": "^7.1.4",
     "@types/body-parser": "^1.17.0",
     "@types/cors": "^2.8.4",
     "@types/express": "^4.16.0",
-    "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasmine": "~3.3.5",
+    "@types/jasminewd2": "~2.0.6",
     "@types/multer": "^1.3.7",
-    "@types/node": "~10.5.6",
+    "@types/node": "~10.12.18",
     "@types/rimraf": "^2.0.2",
     "body-parser": "^1.18.3",
-    "bulma": "^0.7.1",
-    "codelyzer": "~4.4.2",
-    "cors": "^2.8.4",
-    "express": "^4.16.3",
-    "jasmine-core": "~3.1.0",
+    "bulma": "^0.7.2",
+    "codelyzer": "~4.5.0",
+    "cors": "^2.8.5",
+    "express": "^4.16.4",
+    "jasmine-core": "~3.3.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~2.0.5",
+    "karma": "~3.1.4",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^1.2.0",
-    "multer": "^1.3.1",
-    "ng-packagr": "^3.0.6",
-    "protractor": "~5.4.0",
+    "karma-coverage-istanbul-reporter": "~2.0.4",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "multer": "^1.4.1",
+    "ng-packagr": "^4.4.5",
+    "protractor": "~5.4.2",
     "rimraf": "^2.6.2",
-    "ts-node": "~7.0.0",
-    "tsickle": ">=0.32.1",
+    "ts-node": "~7.0.1",
+    "tsickle": "^0.34.0",
     "tslib": "^1.9.3",
-    "tslint": "~5.11.0",
-    "typescript": "^2.9.2"
+    "tslint": "~5.12.0",
+    "typescript": "^3.1.6"
   }
 }
diff --git a/projects/ngx-uploader/package.json b/projects/ngx-uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-uploader",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "homepage": "https://ngx-uploader.com",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "url": "https://github.com/bleenco/ngx-uploader/issues"
   },
   "peerDependencies": {
-    "@angular/common": "^7.0.0",
-    "@angular/core": "^7.0.0"
+    "@angular/common": "^7.1.4",
+    "@angular/core": "^7.1.4"
   }
 }
diff --git a/projects/ngx-uploader/src/lib/ngx-uploader.class.ts b/projects/ngx-uploader/src/lib/ngx-uploader.class.ts
@@ -1,6 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
+import { mergeMap, finalize } from 'rxjs/operators';
 import { UploadFile, UploadOutput, UploadInput, UploadStatus, BlobFile } from './interfaces';
 
 export function humanizeBytes(bytes: number): string {
@@ -23,7 +23,11 @@ export class NgUploaderService {
   contentTypes: string[];
   maxUploads: number;
 
-  constructor(concurrency: number = Number.POSITIVE_INFINITY, contentTypes: string[] = ['*'], maxUploads: number = Number.POSITIVE_INFINITY) {
+  constructor(
+    concurrency: number = Number.POSITIVE_INFINITY,
+    contentTypes: string[] = ['*'],
+    maxUploads: number = Number.POSITIVE_INFINITY
+  ) {
     this.queue = [];
     this.serviceEvents = new EventEmitter<UploadOutput>();
     this.uploadScheduler = new Subject();
@@ -85,7 +89,7 @@ export class NgUploaderService {
               const fileIndex = this.queue.findIndex(file => file.id === id);
               if (fileIndex !== -1) {
                 this.queue[fileIndex].progress.status = UploadStatus.Cancelled;
-                this.serviceEvents.emit({type: 'cancelled', file: this.queue[fileIndex]});
+                this.serviceEvents.emit({ type: 'cancelled', file: this.queue[fileIndex] });
               }
             }
           });
@@ -128,6 +132,11 @@ export class NgUploaderService {
   startUpload(upload: { file: UploadFile, event: UploadInput }): Observable<UploadOutput> {
     return new Observable(observer => {
       const sub = this.uploadFile(upload.file, upload.event)
+        .pipe(finalize(() => {
+          if (!observer.closed) {
+            observer.complete();
+          }
+        }))
         .subscribe(output => {
           observer.next(output);
         }, err => {
@@ -229,7 +238,7 @@ export class NgUploaderService {
 
         Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
 
-        let bodyToSend;
+        let bodyToSend: FormData | BlobFile;
 
         if (event.includeWebKitFormBoundary !== false) {
           Object.keys(data).forEach(key => file.form.append(key, data[key]));
@@ -260,7 +269,7 @@ export class NgUploaderService {
   }
 
   setContentTypes(contentTypes: string[]): void {
-    if (typeof contentTypes != 'undefined' && contentTypes instanceof Array) {
+    if (typeof contentTypes !== 'undefined' && contentTypes instanceof Array) {
       if (contentTypes.find((type: string) => type === '*') !== undefined) {
         this.contentTypes = ['*'];
       } else {
@@ -302,22 +311,23 @@ export class NgUploaderService {
           etaHuman: null
         }
       },
-      lastModifiedDate: file.lastModifiedDate,
+      lastModifiedDate: new Date(file.lastModified),
       sub: undefined,
       nativeFile: file
     };
   }
 
-  private parseResponseHeaders(httpHeaders: ByteString) {
+  private parseResponseHeaders(httpHeaders: string) {
     if (!httpHeaders) {
       return;
     }
+
     return httpHeaders.split('\n')
-      .map(x => x.split(/: */, 2))
-      .filter(x => x[0])
-      .reduce((ac, x) => {
-        ac[x[0]] = x[1];
-        return ac;
+      .map((x: string) => x.split(/: */, 2))
+      .filter((x: string[]) => x[0])
+      .reduce((acc: Object, x: string[]) => {
+        acc[x[0]] = x[1];
+        return acc;
       }, {});
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -32,8 +32,13 @@ <h2>ngx-uploader</h2>
               <div class="upload-item" *ngFor="let f of files; let i = index;">
                 <div class="upload-item-content">
                   <div class="filename">
-                    <i class="ionicon ion-ios-copy"></i>
-                    <span>{{ f.name }}</span>
+                    <div class="filename-left">
+                      <i class="ionicon ion-ios-copy"></i>
+                      <span>{{ f.name }}</span>
+                    </div>
+                    <div class="filename-right">
+                      <i class="ionicon ion-close-round" (click)="cancelUpload(f.id)"></i>
+                    </div>
                   </div>
                   <div class="progress-content">
                     <div class="progress">

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -6,6 +6,7 @@ import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions,
   templateUrl: 'app.component.html'
 })
 export class AppComponent {
+  url = 'http://localhost:4900/upload';
   formData: FormData;
   files: UploadFile[];
   uploadInput: EventEmitter<UploadInput>;
@@ -24,7 +25,7 @@ export class AppComponent {
     if (output.type === 'allAddedToQueue') {
       const event: UploadInput = {
         type: 'uploadAll',
-        url: 'https://ngx-uploader.com/upload',
+        url: this.url,
         method: 'POST',
         data: { foo: 'bar' }
       };
@@ -35,7 +36,7 @@ export class AppComponent {
     } else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
       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') {
+    } else if (output.type === 'cancelled' || output.type === 'removed') {
       this.files = this.files.filter((file: UploadFile) => file !== output.file);
     } else if (output.type === 'dragOver') {
       this.dragOver = true;
@@ -53,7 +54,7 @@ export class AppComponent {
   startUpload(): void {
     const event: UploadInput = {
       type: 'uploadAll',
-      url: 'https://ngx-uploader.com/upload',
+      url: this.url,
       method: 'POST',
       data: { foo: 'bar' }
     };

diff --git a/src/polyfills.ts b/src/polyfills.ts
@@ -43,7 +43,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+
 
 
 /**

diff --git a/src/styles/app.sass b/src/styles/app.sass
@@ -22,7 +22,7 @@ html, body
   height: 100%
 
 body
-  background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%)
+  background: $white
   font-family: 'Roboto', sans-serif
   font-size: 12px
   color: $text
@@ -124,22 +124,33 @@ body
         .filename
           display: flex
           align-items: center
+          justify-content: space-between
+
+          .filename-left, .filename-right
+            display: flex
+            align-items: center
 
           i
             color: $text
             opacity: .8
             font-size: 24px
-            margin-right: 12px
+
+            &.ion-close-round
+
+              &:hover
+                opacity: 1
+                cursor: pointer
 
           span
             color: $text
             font-size: 14px
             font-weight: 400
+            margin-left: 10px
 
         .progress-content
           display: flex
           align-items: center
-          margin: 10px 30px
+          margin: 10px 0
 
           .progress
             display: block
@@ -163,7 +174,7 @@ body
           display: flex
           align-items: center
           justify-content: space-between
-          margin: 10px 30px 0
+          margin: 10px 0 0 0
 
           .progress-text
             font-size: 13px

diff --git a/tsconfig.json b/tsconfig.json
@@ -2,6 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "importHelpers": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,7 +43,7 @@ @@
     /** Evergreen browsers require these. **/
     // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-    import 'core-js/es7/reflect';
     /**
@@ Expand Down @@