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

import ngModule from '../../module';
import Field from '../field';
import './style.scss';

/**
 * Input file selector.
 *
 * @property {String} accept List of valid file types
 */
export default class InputFile extends Field {
    constructor($element, $) {
        super($element, $);
        this._multiple = false;
        this.input = this.element.querySelector('input');
        this.registerEvents();
    }

    /*
     * Registers all event emitters
     */
    registerEvents() {
        this.input.addEventListener('change', () => {
            const files = this.input.files;
            const fileList = Array
                .from(files)
                .map(file => file.name)
                .join(', ');

            const label = this.element.querySelector('.value');
            label.innerHTML = fileList;

            this.field = files.length ? files : null;
        });
    }

    get field() {
        return super.field;
    }

    set field(value) {
        if (!value) this.input.value = '';
        super.field = value;
    }

    /**
     * @property {FileList} files Selected files list
     */
    get files() {
        return this.input.files;
    }

    set files(value) {
        this.input.files = value;
    }

    /**
     * @property {Boolean} multiple Whether to allow multiple file selection
     */
    get multiple() {
        return this.input.multiple;
    }

    set multiple(value) {
        this.input.multiple = value;
    }

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

    onChange() {
        this.emit('change', {
            value: this.field,
            $files: this.files
        });
    }
}

ngModule.vnComponent('vnInputFile', {
    template: require('./index.html'),
    controller: InputFile,
    bindings: {
        multiple: '<?',
        accept: '@?',
        files: '=?'
    }
});