fctrlx-angular-file-reader
Version:
Angular library that helps convert file (from input[type=file]) to base64/arrayBuffer/text using FileReader API.
488 lines (476 loc) • 13.8 kB
JavaScript
import { EventEmitter, Directive, ElementRef, Input, Output, NgModule, Injectable, defineInjectable } from '@angular/core';
import { Observable } from 'rxjs';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Base {
/**
* @param {?} name
* @param {?} element
*/
constructor(name, element) {
this.TYPE_FILE = 'file';
this.converted = [];
this.currentIndex = 0;
this.directiveName = name;
this.element = element;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.type === this.TYPE_FILE && this.isSupported) {
this.element.nativeElement.addEventListener('change', this.filesChanged.bind(this), false);
}
else {
/** @type {?} */
let msg = 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);
}
}
/**
* @param {?} event
* @param {?} readerHandleFn
* @param {?} saveKey
* @return {?}
*/
filesChanged(event, readerHandleFn, saveKey) {
/** @type {?} */
const files = ((/** @type {?} */ (event.target))).files;
this.converted = [];
this.currentIndex = 0;
Object.keys(files).forEach((/**
* @param {?} key
* @return {?}
*/
(key) => {
/** @type {?} */
const reader = new FileReader();
const { name, size, type } = files[key];
reader.onloadend = (/**
* @param {?} file
* @return {?}
*/
(file) => {
this.store(file, saveKey);
});
reader.onerror = (/**
* @param {?} event
* @return {?}
*/
(event) => {
this.handleError(event);
});
reader.onprogress = (/**
* @param {?} event
* @return {?}
*/
(event) => {
this.handleProgress(event);
});
reader.onabort = (/**
* @return {?}
*/
() => this.handleAbort());
this.converted.push({ name, size, type });
reader[readerHandleFn](files[key]);
}));
this.filesChange.next(this.isMultiple ? this.converted : this.converted[0]);
}
/**
* @param {?} event
* @return {?}
*/
handleError(event) {
this.onError.next(event.target.error.message || 'Something went wrong');
}
/**
* @param {?} event
* @return {?}
*/
handleProgress(event) {
if (event.lengthComputable) {
this.onProgress.next(Math.round((event.loaded / event.total) * 100));
}
}
/**
* @return {?}
*/
handleAbort() {
this.onAbort.next('read cancelled');
}
/**
* @param {?} file
* @param {?} key
* @return {?}
*/
store(file, key) {
this.converted[this.currentIndex][key] = file.target.result;
this.currentIndex = this.currentIndex + 1;
}
/**
* @return {?}
*/
ngOnDestroy() {
this.element.nativeElement.removeEventListener('change', this.filesChanged.bind(this), false);
}
/**
* @return {?}
*/
get isSupported() {
return !!(((/** @type {?} */ (window))).File && ((/** @type {?} */ (window))).FileReader &&
((/** @type {?} */ (window))).FileList && window.Blob);
}
/**
* @return {?}
*/
get isMultiple() {
return !(typeof this.multiple === 'undefined');
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FileToBase64 extends Base {
/**
* @param {?} element
*/
constructor(element) {
super(FileToBase64.config.name, element);
this.filesChange = new EventEmitter();
this.onProgress = new EventEmitter();
this.onError = new EventEmitter();
this.onAbort = new EventEmitter();
}
/**
* @param {?} event
* @return {?}
*/
filesChanged(event) {
super.filesChanged(event, FileToBase64.config.method, FileToBase64.config.storeKey);
}
}
FileToBase64.config = {
name: 'fileToBase64',
method: 'readAsDataURL',
storeKey: 'base64',
};
FileToBase64.decorators = [
{ type: Directive, args: [{
selector: '[fileToBase64]',
},] }
];
/** @nocollapse */
FileToBase64.ctorParameters = () => [
{ type: ElementRef }
];
FileToBase64.propDecorators = {
files: [{ type: Input }],
type: [{ type: Input }],
multiple: [{ type: Input }],
filesChange: [{ type: Output }],
onProgress: [{ type: Output }],
onError: [{ type: Output }],
onAbort: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FileToText extends Base {
/**
* @param {?} element
*/
constructor(element) {
super(FileToText.config.name, element);
this.filesChange = new EventEmitter();
this.onProgress = new EventEmitter();
this.onError = new EventEmitter();
this.onAbort = new EventEmitter();
}
/**
* @param {?} event
* @return {?}
*/
filesChanged(event) {
super.filesChanged(event, FileToText.config.method, FileToText.config.storeKey);
}
}
FileToText.config = {
name: 'fileToText',
method: 'readAsText',
storeKey: 'text',
};
FileToText.decorators = [
{ type: Directive, args: [{
selector: '[fileToText]',
},] }
];
/** @nocollapse */
FileToText.ctorParameters = () => [
{ type: ElementRef }
];
FileToText.propDecorators = {
files: [{ type: Input }],
type: [{ type: Input }],
multiple: [{ type: Input }],
filesChange: [{ type: Output }],
onProgress: [{ type: Output }],
onError: [{ type: Output }],
onAbort: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FileToArrayBuffer extends Base {
/**
* @param {?} element
*/
constructor(element) {
super(FileToArrayBuffer.config.name, element);
this.filesChange = new EventEmitter();
this.onProgress = new EventEmitter();
this.onError = new EventEmitter();
this.onAbort = new EventEmitter();
}
/**
* @param {?} event
* @return {?}
*/
filesChanged(event) {
super.filesChanged(event, FileToArrayBuffer.config.method, FileToArrayBuffer.config.storeKey);
}
}
FileToArrayBuffer.config = {
name: 'fileToArrBuf',
method: 'readAsArrayBuffer',
storeKey: 'arrBuf',
};
FileToArrayBuffer.decorators = [
{ type: Directive, args: [{
selector: '[fileToArrBuf]',
},] }
];
/** @nocollapse */
FileToArrayBuffer.ctorParameters = () => [
{ type: ElementRef }
];
FileToArrayBuffer.propDecorators = {
files: [{ type: Input }],
type: [{ type: Input }],
multiple: [{ type: Input }],
filesChange: [{ type: Output }],
onProgress: [{ type: Output }],
onError: [{ type: Output }],
onAbort: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FctrlxAngularFileReader {
}
FctrlxAngularFileReader.decorators = [
{ type: NgModule, args: [{
imports: [],
declarations: [
FileToBase64,
FileToText,
FileToArrayBuffer,
],
exports: [
FileToBase64,
FileToText,
FileToArrayBuffer,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Base$1 {
/**
* @param {?} returnType
*/
constructor(returnType) {
this.TYPE_PROMISE = 'PROMISE';
this.TYPE_SUBSCRIBER = 'OBSERVABLE';
this.returnType = returnType;
}
/**
* @param {?} file
* @return {?}
*/
toBase64(file) {
/** @type {?} */
const reader = new FileReader();
reader.readAsDataURL(file);
return this.response(reader);
}
/**
* @param {?} file
* @return {?}
*/
toText(file) {
/** @type {?} */
const reader = new FileReader();
reader.readAsText(file);
return this.response(reader);
}
/**
* @param {?} file
* @return {?}
*/
toArrBuf(file) {
/** @type {?} */
const reader = new FileReader();
reader.readAsArrayBuffer(file);
return this.response(reader);
}
/**
* @param {?} reader
* @return {?}
*/
response(reader) {
/** @type {?} */
let response;
if (this.returnType === this.TYPE_SUBSCRIBER) {
response = Observable.create((/**
* @param {?} observer
* @return {?}
*/
(observer) => {
reader.onloadend = (/**
* @return {?}
*/
() => {
observer.next((/** @type {?} */ (reader.result)));
observer.complete();
});
reader.onerror = (/**
* @param {?} error
* @return {?}
*/
(error) => {
observer.next((/** @type {?} */ (error)));
observer.complete();
});
}));
}
else if (this.returnType === this.TYPE_PROMISE) {
response = new Promise((/**
* @param {?} resolve
* @param {?} reject
* @return {?}
*/
(resolve, reject) => {
reader.onloadend = (/**
* @return {?}
*/
() => resolve((/** @type {?} */ (reader.result))));
reader.onerror = (/**
* @param {?} error
* @return {?}
*/
error => reject((/** @type {?} */ (error))));
}));
}
return response;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FileReaderPromiseLikeService extends Base$1 {
constructor() {
super('PROMISE');
}
/**
* @param {?} file
* @return {?}
*/
toBase64(file) {
return (/** @type {?} */ (super.toBase64(file)));
}
/**
* @param {?} file
* @return {?}
*/
toText(file) {
return (/** @type {?} */ (super.toText(file)));
}
/**
* @param {?} file
* @return {?}
*/
toArrBuf(file) {
return (/** @type {?} */ (super.toArrBuf(file)));
}
}
FileReaderPromiseLikeService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] }
];
/** @nocollapse */
FileReaderPromiseLikeService.ctorParameters = () => [];
/** @nocollapse */ FileReaderPromiseLikeService.ngInjectableDef = defineInjectable({ factory: function FileReaderPromiseLikeService_Factory() { return new FileReaderPromiseLikeService(); }, token: FileReaderPromiseLikeService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FileReaderObservableLikeService extends Base$1 {
constructor() {
super('OBSERVABLE');
}
/**
* @param {?} file
* @return {?}
*/
toBase64(file) {
return (/** @type {?} */ (super.toBase64(file)));
}
/**
* @param {?} file
* @return {?}
*/
toText(file) {
return (/** @type {?} */ (super.toText(file)));
}
/**
* @param {?} file
* @return {?}
*/
toArrBuf(file) {
return (/** @type {?} */ (super.toArrBuf(file)));
}
}
FileReaderObservableLikeService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] }
];
/** @nocollapse */
FileReaderObservableLikeService.ctorParameters = () => [];
/** @nocollapse */ FileReaderObservableLikeService.ngInjectableDef = defineInjectable({ factory: function FileReaderObservableLikeService_Factory() { return new FileReaderObservableLikeService(); }, token: FileReaderObservableLikeService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { FctrlxAngularFileReader, FileReaderObservableLikeService, FileReaderPromiseLikeService, FileToBase64 as ɵa, Base as ɵb, FileToText as ɵc, FileToArrayBuffer as ɵd, Base$1 as ɵe };
//# sourceMappingURL=fctrlx-angular-file-reader.js.map