Handle Abort event

Author: facetrollex

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fctrlx-angular-file-reader",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Angular library that helps convert file (from input[type=file]) to base64/arrayBuffer/text using FileReader API.",
   "keywords": [
     "angular",

src/lib/directives/Base.ts

@@ -12,6 +12,7 @@ export class Base implements OnInit, OnDestroy {
   public filesChange: EventEmitter<any>;
   public onProgress: EventEmitter<any>;
   public onError: EventEmitter<any>;
+  public onAbort: EventEmitter<any>;
 
   private readonly TYPE_FILE: string = 'file';
   private readonly directiveName: string;
@@ -51,9 +52,19 @@ export class Base implements OnInit, OnDestroy {
       const reader = new FileReader();
       const { name, size, type } = files[key];
 
-      reader.onloadend = (file) => this.store(file, saveKey);
-      reader.onerror = (event) => this.handleError(event);
-      reader.onprogress = (event) => this.handleProgress(event);
+      reader.onloadend = (file) => {
+        this.store(file, saveKey);
+      };
+
+      reader.onerror = (event) => {
+        this.handleError(event);
+      };
+
+      reader.onprogress = (event) => {
+        this.handleProgress(event);
+      };
+
+      reader.onabort = () => this.handleAbort();
 
       this.converted.push({ name, size, type });
 
@@ -68,11 +79,15 @@ export class Base implements OnInit, OnDestroy {
   }
 
   handleProgress(event: any): void {
-    if(event.lengthComputable) {
+    if (event.lengthComputable) {
       this.onProgress.next(Math.round((event.loaded / event.total) * 100));
     }
   }
 
+  handleAbort(): void {
+    this.onAbort.next('read cancelled');
+  }
+
   store(file: { target }, key: string): void {
     this.converted[this.currentIndex][key] = file.target.result;
     this.currentIndex = this.currentIndex + 1;

src/lib/directives/file-to-array-buffer.ts

@@ -19,6 +19,7 @@ export class FileToArrayBuffer extends Base {
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
   @Output() onProgress: EventEmitter<any> = new EventEmitter();
   @Output() onError: EventEmitter<any> = new EventEmitter();
+  @Output() onAbort: EventEmitter<any> = new EventEmitter();
 
   static readonly config: DirectiveConfig = {
     name: 'fileToArrBuf',

src/lib/directives/file-to-base64.ts

@@ -19,6 +19,7 @@ export class FileToBase64 extends Base {
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
   @Output() onProgress: EventEmitter<any> = new EventEmitter();
   @Output() onError: EventEmitter<any> = new EventEmitter();
+  @Output() onAbort: EventEmitter<any> = new EventEmitter();
 
   static readonly config: DirectiveConfig = {
     name: 'fileToBase64',

src/lib/directives/file-to-text.ts

@@ -19,6 +19,7 @@ export class FileToText extends Base {
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
   @Output() onProgress: EventEmitter<any> = new EventEmitter();
   @Output() onError: EventEmitter<any> = new EventEmitter();
+  @Output() onAbort: EventEmitter<any> = new EventEmitter();
 
   static readonly config: DirectiveConfig = {
     name: 'fileToText',