File reader Service/Configuration for directives

Author: facetrollex

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fctrlx-angular-file-reader",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Angular library that helps convert file (from input[type=file]) to base64/arrayBuffer/text using FileReader API.",
   "keywords": [
     "angular",
@@ -16,7 +16,12 @@
     "file-to-base64",
     "file-to-array-buffer",
     "file-to-text",
-    "filetotext"
+    "filetotext",
+    "file-reader-service",
+    "file-reader-promise",
+    "file-reader-promise-like",
+    "file-reader-observable",
+    "file-reader-observable-like"
   ],
   "homepage": "https://github.com/facetrollex/fctrlx-angular-file-reader",
   "author": {

src/lib/directives/Base.ts

@@ -49,7 +49,7 @@ export class Base implements OnInit, OnDestroy {
       const reader = new FileReader();
       const { name, size, type } = files[key];
 
-      reader.onload = (file) => {
+      reader.onloadend = (file) => {
         this.store(file, saveKey);
       };
 

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

@@ -6,6 +6,7 @@ import {
     Output,
 } from '@angular/core';
 import { Base } from './Base';
+import { DirectiveConfig } from '../models/directive-config';
 
 @Directive({
   selector: '[fileToArrBuf]',
@@ -17,11 +18,17 @@ export class FileToArrayBuffer extends Base {
 
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
 
+  static readonly config: DirectiveConfig = {
+    name: 'fileToArrBuf',
+    method: 'readAsArrayBuffer',
+    storeKey: 'arrBuf',
+  };
+
   constructor(element: ElementRef) {
-    super('fileToArrBuf', element);
+    super(FileToArrayBuffer.config.name, element);
   }
 
   filesChanged(event: Event): void {
-    super.filesChanged(event, 'readAsArrayBuffer', 'arrBuf');
+    super.filesChanged(event, FileToArrayBuffer.config.method, FileToArrayBuffer.config.storeKey);
   }
 }

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

@@ -6,6 +6,7 @@ import {
   Output,
 } from '@angular/core';
 import { Base } from './Base';
+import { DirectiveConfig } from '../models/directive-config';
 
 @Directive({
   selector: '[fileToBase64]',
@@ -17,11 +18,17 @@ export class FileToBase64 extends Base {
 
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
 
+  static readonly config: DirectiveConfig = {
+    name: 'fileToBase64',
+    method: 'readAsDataURL',
+    storeKey: 'base64',
+  };
+
   constructor(element: ElementRef) {
-    super('fileToBase64', element);
+    super(FileToBase64.config.name, element);
   }
 
   filesChanged(event: Event): void {
-    super.filesChanged(event, 'readAsDataURL', 'base64');
+    super.filesChanged(event, FileToBase64.config.method, FileToBase64.config.storeKey);
   }
 }

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

@@ -6,6 +6,7 @@ import {
     Output,
 } from '@angular/core';
 import { Base } from './Base';
+import { DirectiveConfig } from '../models/directive-config';
 
 @Directive({
   selector: '[fileToText]',
@@ -17,11 +18,17 @@ export class FileToText extends Base {
 
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
 
+  static readonly config: DirectiveConfig = {
+    name: 'fileToText',
+    method: 'readAsText',
+    storeKey: 'text',
+  };
+
   constructor(element: ElementRef) {
-    super('fileToText', element);
+    super(FileToText.config.name, element);
   }
 
   filesChanged(event: Event): void {
-    super.filesChanged(event, 'readAsText', 'text');
+    super.filesChanged(event, FileToText.config.method, FileToText.config.storeKey);
   }
 }

src/lib/models/directive-config.ts

@@ -0,0 +1,5 @@
+export interface DirectiveConfig {
+  name: string;
+  method: string;
+  storeKey: string;
+}

src/lib/services/Base.ts

@@ -0,0 +1,56 @@
+import { Observable, Observer } from 'rxjs';
+import { FileReaderInterface } from './file-reader.interface';
+
+export class Base implements FileReaderInterface
+{
+  private readonly TYPE_PROMISE: string = 'PROMISE';
+  private readonly TYPE_SUBSCRIBER: string = 'OBSERVABLE';
+  private readonly returnType: string;
+
+  constructor(returnType: string) {
+    this.returnType = returnType;
+  }
+
+  toBase64(file: File): Observable<string> | Promise<string> {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    return this.response(reader);
+  }
+
+  toText(file: File): Observable<string> | Promise<string> {
+    const reader = new FileReader();
+    reader.readAsText(file);
+    return this.response(reader);
+  }
+
+  toArrBuf(file: File): Observable<string> | Promise<string> {
+    const reader = new FileReader();
+    reader.readAsArrayBuffer(file);
+    return this.response(reader);
+  }
+
+  response(reader: FileReader): Observable<string> | Promise<string> {
+    let response;
+
+    if (this.returnType === this.TYPE_SUBSCRIBER) {
+      response = Observable.create((observer: Observer<string>) => {
+        reader.onloadend = () => {
+          observer.next(<string>reader.result);
+          observer.complete();
+        };
+
+        reader.onerror = (error) => {
+          observer.next(<any>error);
+          observer.complete();
+        };
+      });
+    } else if (this.returnType === this.TYPE_PROMISE) {
+      response = new Promise((resolve, reject) => {
+        reader.onloadend = () => resolve(<string>reader.result);
+        reader.onerror = error => reject(<any>error);
+      });
+    }
+
+    return response;
+  }
+}

src/lib/services/file-reader-observable-like.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Base } from './Base';
+import { FileReaderInterface } from './file-reader.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FileReaderObservableLikeService extends Base implements FileReaderInterface
+{
+  constructor() {
+    super('OBSERVABLE');
+  }
+
+  toBase64(file: File): Observable<string> {
+    return <Observable<string>>super.toBase64(file);
+  }
+
+  toText(file: File): Observable<string> {
+    return <Observable<string>>super.toText(file);
+  }
+
+  toArrBuf(file: File): Observable<string> {
+    return <Observable<string>>super.toArrBuf(file);
+  }
+}

src/lib/services/file-reader-promise-like.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Base } from './Base';
+import { FileReaderInterface } from './file-reader.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FileReaderPromiseLikeService extends Base implements FileReaderInterface
+{
+  constructor() {
+    super('PROMISE');
+  }
+
+  toBase64(file: File): Promise<string> {
+    return <Promise<string>>super.toBase64(file);
+  }
+
+  toText(file: File): Promise<string> {
+    return <Promise<string>>super.toText(file);
+  }
+
+  toArrBuf(file: File): Promise<string> {
+    return <Promise<string>>super.toArrBuf(file);
+  }
+}

src/lib/services/file-reader.interface.ts

@@ -0,0 +1,7 @@
+import { Observable } from 'rxjs';
+
+export interface FileReaderInterface {
+  toBase64(file: File): Observable<string> | Promise<string>;
+  toText(file: File): Observable<string> | Promise<string>;
+  toArrBuf(file: File): Observable<string> | Promise<string>;
+}