First version (not pulled to npm

Author: facetrollex

README.md

@@ -0,0 +1,24 @@
+# FctrlxAngularFileToBase64
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project fctrlx-angular-file-to-base64` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project fctrlx-angular-file-to-base64`.
+> Note: Don't forget to add `--project fctrlx-file-to-base64` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build fctrlx-file-to-base64` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build fctrlx-file-to-base64`, go to the dist folder `cd dist/fctrlx-angular-file-to-base64` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test fctrlx-file-to-base64` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', '@angular-devkit/build-angular'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-jasmine-html-reporter'),
+ require('karma-coverage-istanbul-reporter'),
+ require('@angular-devkit/build-angular/plugins/karma')
+ ],
+ client: {
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ },
+ coverageIstanbulReporter: {
+ dir: require('path').join(__dirname, '../../coverage/fctrlx-file-to-base64'),
+ reports: ['html', 'lcovonly'],
+ fixWebpackSourcePaths: true
+ },
+ reporters: ['progress', 'kjhtml'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false,
+ restartOnFileChange: true
+ });
+};

ng-package.json

@@ -0,0 +1,7 @@
+{
+ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+ "dest": "../../dist/fctrlx-file-to-base64",
+ "lib": {
+ "entryFile": "src/public-api.ts"
+ }
+}

package.json

@@ -0,0 +1,8 @@
+{
+ "name": "fctrlx-file-to-base64",
+ "version": "0.0.1",
+ "peerDependencies": {
+ "@angular/common": "^7.2.0",
+ "@angular/core": "^7.2.0"
+ }
+}

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

@@ -0,0 +1,8 @@
+import { FctrlxFileToBase64Directive } from './fctrlx-file-to-base64.directive';
+
+describe('FctrlxFileToBase64Directive', () => {
+ it('should create an instance', () => {
+ const directive = new FctrlxFileToBase64Directive();
+ expect(directive).toBeTruthy();
+ });
+});

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

@@ -0,0 +1,66 @@
+import { Directive, ElementRef, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+
+@Directive({
+ selector: '[fileToBase64]'
+})
+export class FctrlxFileToBase64Directive implements OnInit, OnDestroy {
+
+ @Input() files: any;
+ @Input() type: string;
+ @Input() multiple: any;
+
+ @Output() filesChange: EventEmitter<any> = new EventEmitter();
+
+ private readonly TYPE_FILE: string = 'file';
+
+ private reader: FileReader = new FileReader();
+ private converted: any = [];
+ private currentIndex: number = 0;
+
+ constructor(private element: ElementRef) {}
+
+ ngOnInit(): void {
+ if(this.type === this.TYPE_FILE) {
+ this.element.nativeElement.addEventListener('change', this.filesChanged.bind(this), false);
+
+ this.reader.onload = (file) => {
+ this.readFile(file)
+ }
+ }
+ }
+
+ get isMultiple(): boolean {
+ return !(typeof this.multiple === 'undefined');
+ }
+
+ filesChanged(event) {
+ let files = event.target.files;
+
+ this.converted = [];
+ this.currentIndex = 0;
+
+ Object.keys(files).forEach((key) => {
+ const { name, size, type, base64 } = files[key];
+
+ this.converted.push({
+ name,
+ size,
+ type,
+ base64
+ });
+
+ this.reader.readAsDataURL(files[key]);
+ });
+
+ this.filesChange.next(this.isMultiple ? this.converted : this.converted[0]);
+ }
+
+ readFile(file) {
+ this.converted[this.currentIndex].base64 = file.target.result;
+ }
+
+ ngOnDestroy(): void {
+ this.element.nativeElement.removeEventListener('change', this.filesChanged.bind(this), false);
+ this.reader.onload = null;
+ }
+}

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { FctrlxFileToBase64Directive } from './fctrlx-file-to-base64.directive';
+
+@NgModule({
+ imports: [],
+ declarations: [FctrlxFileToBase64Directive],
+ exports: [FctrlxFileToBase64Directive],
+})
+export class FctrlxFileToBase64 { }

src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of fctrlx-file-to-base64
+ */
+
+export * from './lib/fctrlx-file-to-base64.module';

src/test.ts

@@ -0,0 +1,22 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../out-tsc/lib",
+ "target": "es2015",
+ "module": "es2015",
+ "moduleResolution": "node",
+ "declaration": true,
+ "sourceMap": true,
+ "inlineSources": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "importHelpers": true,
+ "types": [],
+ "lib": [
+ "dom",
+ "es2018"
+ ]
+ },
+ "angularCompilerOptions": {
+ "annotateForClosureCompiler": true,
+ "skipTemplateCodegen": true,
+ "strictMetadataEmit": true,
+ "fullTemplateTypeCheck": true,
+ "strictInjectionParameters": true,
+ "enableResourceInlining": true
+ },
+ "exclude": [
+ "src/test.ts",
+ "**/*.spec.ts"
+ ]
+}