salix/front/core/components/input-file/index.js

import ngModule from '../../module';
import Input from '../../lib/input';
import './style.scss';

export default class InputFile extends Input {
    constructor($element, $scope, $attrs, vnTemplate) {
        super($element, $scope);
        this.element = $element[0];
        this.hasFocus = false;
        this._multiple = false;
        this._value = 'Select a file';

        vnTemplate.normalizeInputAttrs($attrs);

        this.registerEvents();
    }

    /**
     * Registers all event emitters
     */
    registerEvents() {
        this.input.addEventListener('change', event => {
            const target = event.target;
            const fileNames = Array.from(target.files).map(file => {
                return file.name;
            });
            const names = fileNames.join(', ');
            const label = this.element.querySelector('.value');
            label.innerHTML = names;
            this.files = target.files;

            this.emit('change', {files: target.files, event});
        });
    }

    get value() {
        return this._value;
    }

    set value(value) {
        this._value = value;
    }

    /**
     * Gets current value
     */
    get files() {
        return this._files;
    }

    /**
     * Sets input value
     *
     * @param {Number} value - Value
     */
    set files(value) {
        this._files = value;
        this.hasValue = !(value === null || value === undefined || value === '');

        if (this.hasValue)
            this.element.classList.add('not-empty');
        else
            this.element.classList.remove('not-empty');
    }

    /**
     * Gets if multiple file selection
     */
    get multiple() {
        return this._multiple;
    }

    /**
     * Sets multiple file selection
     *
     * @param {Boolean} value - True if is multiple
     */
    set multiple(value) {
        this._multiple = value;

        if (value)
            this.input.multiple = true;
        else
            this.input.multiple = false;
    }

    /**
     * Returns a list of valid file types
     */
    get accept() {
        return this._accept;
    }

    /**
     * Sets a list of valid file types
     *
     * @param {String} value - Valid file types
     */
    set accept(value) {
        this._accept = value;
    }

    /**
     * Fires file selection explorer event
     */
    openFileSelector() {
        this.input.click();
    }
}

InputFile.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];

ngModule.component('vnInputFile', {
    template: require('./index.html'),
    controller: InputFile,
    transclude: {
        leftIcons: '?tLeftIcons',
        rightIcons: '?tRightIcons'
    },
    bindings: {
        label: '@?',
        name: '@?',
        disabled: '<?',
        multiple: '<?',
        required: '@?',
        accept: '@?',
        rule: '@?',
        files: '=model',
        validate: '&',
        onChange: '&',
        onClear: '&'
    }
});