Moved functionality to base class(new directives will be based on it)

Author: facetrollex

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fctrlx-file-to-base64",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/common": "^7.2.0",
     "@angular/core": "^7.2.0"

src/lib/Base.ts

@@ -0,0 +1,81 @@
+import {
+  ElementRef,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { Converted } from './converted';
+
+export class Base implements OnInit, OnDestroy {
+  public type: string;
+  public multiple: undefined | null | string | boolean;
+  public filesChange: EventEmitter<any>;
+
+  private readonly TYPE_FILE: string = 'file';
+  private readonly directiveName: string;
+
+  private element: ElementRef;
+  private converted: Converted[]  = [];
+  private currentIndex: number = 0;
+
+  constructor(name: string, element: ElementRef) {
+    this.directiveName = name;
+    this.element = element;
+  }
+
+  ngOnInit(): void {
+    if (this.type === this.TYPE_FILE && this.isSupported) {
+      this.element.nativeElement.addEventListener('change', this.filesChanged.bind(this), false);
+    } else {
+      let msg: string = this.directiveName;
+
+      if (!this.isSupported) {
+        msg += ' is not supported by your browser.';
+      } else {
+        msg += ' working only with input type=file.';
+      }
+
+      console.warn(msg, this.element.nativeElement);
+    }
+  }
+
+  filesChanged(event: Event, readerHandleFn: string, saveKey: string): void {
+    const files = (<HTMLInputElement>event.target).files;
+
+    this.converted = [];
+    this.currentIndex = 0;
+
+    Object.keys(files).forEach((key: string) => {
+      const reader = new FileReader();
+      const { name, size, type } = files[key];
+
+      reader.onload = (file) => {
+        this.store(file, saveKey);
+      };
+
+      this.converted.push({ name, size, type });
+
+      reader[readerHandleFn](files[key]);
+    });
+
+    this.filesChange.next(this.isMultiple ? this.converted : this.converted[0]);
+  }
+
+  store(file: { target }, key: string): void {
+    this.converted[this.currentIndex][key] = file.target.result;
+    this.currentIndex = this.currentIndex + 1;
+  }
+
+  ngOnDestroy(): void {
+    this.element.nativeElement.removeEventListener('change', this.filesChanged.bind(this), false);
+  }
+
+  get isSupported(): boolean {
+    return !!((window as any).File && (window as any).FileReader &&
+              (window as any).FileList && window.Blob);
+  }
+
+  get isMultiple(): boolean {
+    return !(typeof this.multiple === 'undefined');
+  }
+}

src/lib/fctrlx-file-to-base64.directive.ts

@@ -4,88 +4,25 @@ import {
   EventEmitter,
   Input,
   Output,
-  OnInit,
-  OnDestroy,
 } from '@angular/core';
-import { Converted } from './converted';
+import { Base } from './Base';
 
 @Directive({
   selector: '[fileToBase64]',
 })
-export class FctrlxFileToBase64Directive implements OnInit, OnDestroy {
+export class FctrlxFileToBase64Directive extends Base {
 
   @Input() files: any;
   @Input() type: string;
   @Input() multiple: undefined | null | string | boolean;
 
   @Output() filesChange: EventEmitter<any> = new EventEmitter();
 
-  private readonly TYPE_FILE: string = 'file';
-
-  private converted: Converted[]  = [];
-  private currentIndex: number = 0;
-
-  constructor(private element: ElementRef) {}
-
-  ngOnInit(): void {
-    if (this.type === this.TYPE_FILE && this.isSupported) {
-      this.element.nativeElement.addEventListener('change', this.filesChanged.bind(this), false);
-    } else {
-      let msg: string = 'fileToBase64 ';
-
-      if (!this.isSupported) {
-        msg += 'is not supported by your browser.';
-      } else {
-        msg += 'working only with input type=file.';
-      }
-
-      console.warn(msg, this.element.nativeElement);
-    }
+  constructor(element: ElementRef) {
+    super('fileToBase64', element);
   }
 
   filesChanged(event: Event): void {
-    const files = (<HTMLInputElement>event.target).files;
-
-    this.converted = [];
-    this.currentIndex = 0;
-
-    Object.keys(files).forEach((key: string) => {
-      const reader = new FileReader();
-
-      reader.onload = (file) => {
-        this.storeBase64(file);
-      };
-
-      const { name, size, type, base64 } = files[key];
-
-      this.converted.push({
-        name,
-        size,
-        type,
-        base64,
-      });
-
-      reader.readAsDataURL(files[key]);
-    });
-
-    this.filesChange.next(this.isMultiple ? this.converted : this.converted[0]);
-  }
-
-  storeBase64(file: { target }) {
-    this.converted[this.currentIndex].base64 = file.target.result;
-    this.currentIndex = this.currentIndex + 1;
-  }
-
-  get isMultiple(): boolean {
-    return !(typeof this.multiple === 'undefined');
-  }
-
-  get isSupported(): boolean {
-    return !!((window as any).File && (window as any).FileReader &&
-              (window as any).FileList && window.Blob);
-  }
-
-  ngOnDestroy(): void {
-    this.element.nativeElement.removeEventListener('change', this.filesChanged.bind(this), false);
+    super.filesChanged(event, 'readAsDataURL', 'base64');
   }
 }