Added onError/onProgress to directives. Updated Readme/Plunkr

Author: facetrollex

README.md

@@ -11,6 +11,10 @@ Angular library that helps convert file (from input[type=file]) to base64/arrayB
 
 # [Documentation](https://github.com/facetrollex/fctrlx-angular-file-reader/wiki)
 # [Example](https://next.plnkr.co/edit/MlwNL3BKXdVtX3Xx)
+# Support
+_If you have any suggestions or if you found an issue, please add it to [here](https://github.com/facetrollex/fctrlx-angular-file-reader/issues)._
+
+**Thanks!!**
 
 # Author
 _Alexey Khamitsevich_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fctrlx-angular-file-reader",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Angular library that helps convert file (from input[type=file]) to base64/arrayBuffer/text using FileReader API.",
   "keywords": [
     "angular",
@@ -21,7 +21,11 @@
     "file-reader-promise",
     "file-reader-promise-like",
     "file-reader-observable",
-    "file-reader-observable-like"
+    "file-reader-observable-like",
+    "file",
+    "FileAPI",
+    "File API",
+    "File Reader"
   ],
   "homepage": "https://github.com/facetrollex/fctrlx-angular-file-reader",
   "author": {
@@ -35,7 +39,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^7.2.0",
-    "@angular/core": "^7.2.0"
+    "@angular/common": "^7.2.2",
+    "@angular/core": "^7.2.2",
+    "rxjs": "~6.3.3"
   }
 }

src/lib/directives/Base.ts

@@ -10,6 +10,8 @@ export class Base implements OnInit, OnDestroy {
   public type: string;
   public multiple: undefined | null | string | boolean;
   public filesChange: EventEmitter<any>;
+  public onProgress: EventEmitter<any>;
+  public onError: EventEmitter<any>;
 
   private readonly TYPE_FILE: string = 'file';
   private readonly directiveName: string;
@@ -49,9 +51,9 @@ export class Base implements OnInit, OnDestroy {
       const reader = new FileReader();
       const { name, size, type } = files[key];
 
-      reader.onloadend = (file) => {
-        this.store(file, saveKey);
-      };
+      reader.onloadend = (file) => this.store(file, saveKey);
+      reader.onerror = (event) => this.handleError(event);
+      reader.onprogress = (event) => this.handleProgress(event);
 
       this.converted.push({ name, size, type });
 
@@ -61,6 +63,16 @@ export class Base implements OnInit, OnDestroy {
     this.filesChange.next(this.isMultiple ? this.converted : this.converted[0]);
   }
 
+  handleError(event: any): void {
+    this.onError.next(event.target.error.message || 'Something went wrong');
+  }
+
+  handleProgress(event: any): void {
+    if(event.lengthComputable) {
+      this.onProgress.next(Math.round((event.loaded / event.total) * 100));
+    }
+  }
+
   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

@@ -17,6 +17,8 @@ export class FileToArrayBuffer extends Base {
   @Input() multiple: undefined | null | string | boolean;
 
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
+  @Output() onProgress: EventEmitter<any> = new EventEmitter();
+  @Output() onError: EventEmitter<any> = new EventEmitter();
 
   static readonly config: DirectiveConfig = {
     name: 'fileToArrBuf',

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

@@ -17,6 +17,8 @@ export class FileToBase64 extends Base {
   @Input() multiple: undefined | null | string | boolean;
 
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
+  @Output() onProgress: EventEmitter<any> = new EventEmitter();
+  @Output() onError: EventEmitter<any> = new EventEmitter();
 
   static readonly config: DirectiveConfig = {
     name: 'fileToBase64',

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

@@ -17,6 +17,8 @@ export class FileToText extends Base {
   @Input() multiple: undefined | null | string | boolean;
 
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
+  @Output() onProgress: EventEmitter<any> = new EventEmitter();
+  @Output() onError: EventEmitter<any> = new EventEmitter();
 
   static readonly config: DirectiveConfig = {
     name: 'fileToText',