ng2-file-type/ng2-file-type.directive.js

Angular input file type directive

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var Ng2FileTypeDirective = (function () {
    /**
     *
     * @param {ElementRef} element
     * @return {void}
     * @public
     */
    function Ng2FileTypeDirective(element) {
        /**
         * @type {string}
         * @public
         */
        this.fileTypeErrorMsg = 'File type is invalid';
        /**
         * @type {boolean}
         * @private
         */
        this._multiple = false;
        this._element = element;
    }
    Object.defineProperty(Ng2FileTypeDirective.prototype, "multiple", {
        /**
         * @return {boolean}
         */
        get: function () {
            return this._multiple;
        },
        /**
         * @type {boolean}
         * @private
         */
        set: function (value) {
            this._multiple = value === '' || !!value;
        },
        enumerable: true,
        configurable: true
    });
    ;
    /**
     *
     * @return {void}
     * @param {SimpleChanges} changes
     */
    Ng2FileTypeDirective.prototype.ngOnChanges = function (changes) {
        // error message has been changed
        if (changes.fileTypeErrorMsg && !changes.fileTypeErrorMsg.firstChange) {
            this._setValidity(this._getInputValue(this._element.nativeElement));
        }
    };
    /**
     *
     * @public
     * @returns {void}
     */
    Ng2FileTypeDirective.prototype.ngDoCheck = function () {
        if (this._control) {
            var changeDetected = false;
            if (this.ng2FileType !== this._oldValue) {
                changeDetected = true;
                this._oldValue = this.ng2FileType;
            }
            if (changeDetected) {
                this._setValidity(this._getInputValue(this._element.nativeElement));
            }
        }
    };
    /**
     *
     * @param {FormControl} control
     * @return {ValidationErrors}
     * @private
     */
    Ng2FileTypeDirective.prototype.validate = function (control) {
        if (!this._control) {
            this._control = control;
        }
        if (this._hasError(this._control.value)) {
            return {
                type: this.fileTypeErrorMsg
            };
        }
    };
    /**
     *
     * @param {EventTarget} eventTarget
     * @return {void}
     */
    Ng2FileTypeDirective.prototype.onChange = function (eventTarget) {
        var value = this._getInputValue(eventTarget);
        this._setValidity(value);
    };
    /**
     *
     * @param value
     * @private
     */
    Ng2FileTypeDirective.prototype._setValidity = function (value) {
        var errors = Object.assign({}, this._control.errors);
        if (this._hasError(value)) {
            errors.type = this.fileTypeErrorMsg;
        }
        else {
            if (this._control.hasError('type')) {
                delete errors.type;
            }
        }
        this._control.setErrors(Object.keys(errors).length ? errors : null);
    };
    /**
     *
     * @param {File|FileList|undefined} value
     * @return {boolean}
     * @private
     */
    Ng2FileTypeDirective.prototype._hasError = function (value) {
        return this.ng2FileType && !this._hasValidType(value);
    };
    /**
     *
     * @param {File|FileList} value
     * @return {boolean}
     * @private
     */
    Ng2FileTypeDirective.prototype._hasValidType = function (value) {
        var valid = true;
        if (value) {
            if (this.multiple && !!value.length) {
                value = value;
                for (var i = 0; i < value.length; i++) {
                    var file = value.item(i);
                    if (!this._validateType(file)) {
                        valid = false;
                        break;
                    }
                }
            }
            else {
                valid = this._validateType(value);
            }
        }
        return valid;
    };
    ;
    /**
     *
     * @param value
     * @returns {boolean}
     * @private
     */
    Ng2FileTypeDirective.prototype._validateType = function (value) {
        var valid = true;
        if (value) {
            if (this.ng2FileType instanceof RegExp) {
                valid = this.ng2FileType.test(value.type);
            }
            else if (typeof this.ng2FileType === 'string') {
                valid = this.ng2FileType === value.type;
            }
            else if (Array.isArray(this.ng2FileType)) {
                valid = this.ng2FileType.includes(value.type);
            }
        }
        return valid;
    };
    /**
     *
     * @param {FileInputEventTarget} eventTarget
     * @return {File|FileList|undefined}
     * @private
     */
    Ng2FileTypeDirective.prototype._getInputValue = function (eventTarget) {
        return this.multiple ? eventTarget.files : eventTarget.files.item(0);
    };
    Ng2FileTypeDirective.decorators = [
        { type: core_1.Directive, args: [{
                    selector: 'input[type="file"][ng2FileType][formControlName],input[type="file"][ng2FileType][formControl],input[type="file"][ng2FileType][ngModel]',
                    exportAs: 'ng2FileTypeDirective',
                    providers: [
                        {
                            provide: forms_1.NG_VALIDATORS,
                            useExisting: Ng2FileTypeDirective,
                            multi: true
                        }
                    ]
                },] },
    ];
    /** @nocollapse */
    Ng2FileTypeDirective.ctorParameters = function () { return [
        { type: core_1.ElementRef, },
    ]; };
    Ng2FileTypeDirective.propDecorators = {
        'ng2FileType': [{ type: core_1.Input },],
        'fileTypeErrorMsg': [{ type: core_1.Input },],
        'multiple': [{ type: core_1.Input },],
        'onChange': [{ type: core_1.HostListener, args: ['change', ['$event.target'],] },],
    };
    return Ng2FileTypeDirective;
}());
exports.Ng2FileTypeDirective = Ng2FileTypeDirective;