132 lines
2.8 KiB
JavaScript
132 lines
2.8 KiB
JavaScript
import ngModule from '../../module';
|
|
import Input from '../../lib/input';
|
|
import './style.scss';
|
|
|
|
export default class InputFile extends Input {
|
|
constructor($element, $scope) {
|
|
super($element, $scope);
|
|
this.element = $element[0];
|
|
this.hasFocus = false;
|
|
this._multiple = false;
|
|
this._value = 'Select a file';
|
|
|
|
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'];
|
|
|
|
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: '&'
|
|
}
|
|
});
|