diff --git a/README.md b/README.md index b86a9fe..bc8cdd4 100644 --- a/README.md +++ b/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_ diff --git a/package.json b/package.json index 5610669..d85ef55 100644 --- a/package.json +++ b/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" } } diff --git a/src/lib/directives/Base.ts b/src/lib/directives/Base.ts index 9e126c0..743f70a 100644 --- a/src/lib/directives/Base.ts +++ b/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; + public onProgress: EventEmitter; + public onError: EventEmitter; 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; diff --git a/src/lib/directives/file-to-array-buffer.ts b/src/lib/directives/file-to-array-buffer.ts index dd06a6b..839c315 100644 --- a/src/lib/directives/file-to-array-buffer.ts +++ b/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 = new EventEmitter(); + @Output() onProgress: EventEmitter = new EventEmitter(); + @Output() onError: EventEmitter = new EventEmitter(); static readonly config: DirectiveConfig = { name: 'fileToArrBuf', diff --git a/src/lib/directives/file-to-base64.ts b/src/lib/directives/file-to-base64.ts index 2bd6027..28b4a6f 100644 --- a/src/lib/directives/file-to-base64.ts +++ b/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 = new EventEmitter(); + @Output() onProgress: EventEmitter = new EventEmitter(); + @Output() onError: EventEmitter = new EventEmitter(); static readonly config: DirectiveConfig = { name: 'fileToBase64', diff --git a/src/lib/directives/file-to-text.ts b/src/lib/directives/file-to-text.ts index a09b89f..c34873b 100644 --- a/src/lib/directives/file-to-text.ts +++ b/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 = new EventEmitter(); + @Output() onProgress: EventEmitter = new EventEmitter(); + @Output() onError: EventEmitter = new EventEmitter(); static readonly config: DirectiveConfig = { name: 'fileToText',