2017-08-11 17:59:31 +03:00
|
|
|
import BaseInput from "./baseInput";
|
2016-01-26 21:12:48 +03:00
|
|
|
//import Checkbox from './checkbox'
|
|
|
|
//import Radio from './radio'
|
|
|
|
//import Switch from './switch'
|
|
|
|
//import Text from './text'
|
|
|
|
//import Textarea from './textarea'
|
|
|
|
//import Select from './select'
|
2017-08-11 17:59:31 +03:00
|
|
|
import Util from "./util";
|
2016-01-26 21:12:48 +03:00
|
|
|
|
2017-08-11 17:59:31 +03:00
|
|
|
const File = ($ => {
|
2016-01-26 21:12:48 +03:00
|
|
|
/**
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
* Constants
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
*/
|
2017-08-11 17:59:31 +03:00
|
|
|
const NAME = "file";
|
|
|
|
const DATA_KEY = `bmd.${NAME}`;
|
|
|
|
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`;
|
|
|
|
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME];
|
2016-01-26 21:12:48 +03:00
|
|
|
|
2017-08-11 17:59:31 +03:00
|
|
|
const Default = {};
|
2016-01-26 21:12:48 +03:00
|
|
|
|
|
|
|
const ClassName = {
|
|
|
|
FILE: NAME,
|
2017-08-11 17:59:31 +03:00
|
|
|
IS_FILE: "is-file"
|
|
|
|
};
|
2016-01-26 21:12:48 +03:00
|
|
|
|
|
|
|
const Selector = {
|
2017-08-11 17:59:31 +03:00
|
|
|
FILENAMES: "input.form-control[readonly]"
|
|
|
|
};
|
2016-01-26 21:12:48 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
* Class Definition
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
*/
|
|
|
|
class File extends BaseInput {
|
|
|
|
constructor($element, config) {
|
2017-08-11 17:59:31 +03:00
|
|
|
super(
|
|
|
|
$element,
|
|
|
|
$.extend(
|
|
|
|
true,
|
|
|
|
//{invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]},
|
|
|
|
Default,
|
|
|
|
config
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
this.$bmdFormGroup.addClass(ClassName.IS_FILE);
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
dispose() {
|
2017-08-11 17:59:31 +03:00
|
|
|
super.dispose(DATA_KEY);
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
static matches($element) {
|
2017-08-11 17:59:31 +03:00
|
|
|
if ($element.attr("type") === "file") {
|
|
|
|
return true;
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
2017-08-11 17:59:31 +03:00
|
|
|
return false;
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
static rejectMatch(component, $element) {
|
2017-08-11 17:59:31 +03:00
|
|
|
Util.assert(
|
|
|
|
this.$element,
|
|
|
|
this.matches($element),
|
|
|
|
`${component} component element ${Util.describe(
|
|
|
|
$element
|
|
|
|
)} is invalid for type='file'.`
|
|
|
|
);
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
// ------------------------------------------------------------------------
|
|
|
|
// protected
|
|
|
|
|
|
|
|
// Demarcation element (e.g. first child of a form-group)
|
|
|
|
outerElement() {
|
|
|
|
// label.file > input[type=file]
|
2017-08-11 17:59:31 +03:00
|
|
|
return this.$element.parent().closest(`.${ClassName.FILE}`);
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
rejectWithoutRequiredStructure() {
|
|
|
|
// label.file > input[type=file]
|
2017-08-11 17:59:31 +03:00
|
|
|
Util.assert(
|
|
|
|
this.$element,
|
|
|
|
!this.outerElement().prop("tagName") === "label",
|
|
|
|
`${this.constructor.name}'s ${Util.describe(
|
|
|
|
this.$element
|
|
|
|
)} parent element ${Util.describe(
|
|
|
|
this.outerElement()
|
|
|
|
)} should be <label>.`
|
|
|
|
);
|
|
|
|
Util.assert(
|
|
|
|
this.$element,
|
|
|
|
!this.outerElement().hasClass(ClassName.FILE),
|
|
|
|
`${this.constructor.name}'s ${Util.describe(
|
|
|
|
this.$element
|
|
|
|
)} parent element ${Util.describe(
|
|
|
|
this.outerElement()
|
|
|
|
)} should have class .${ClassName.FILE}.`
|
|
|
|
);
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
addFocusListener() {
|
2016-03-28 23:18:19 +03:00
|
|
|
this.$bmdFormGroup
|
2017-08-11 17:59:31 +03:00
|
|
|
.on("focus", () => {
|
|
|
|
this.addFormGroupFocus();
|
2016-01-26 21:12:48 +03:00
|
|
|
})
|
2017-08-11 17:59:31 +03:00
|
|
|
.on("blur", () => {
|
|
|
|
this.removeFormGroupFocus();
|
|
|
|
});
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
addChangeListener() {
|
|
|
|
// set the fileinput readonly field with the name of the file
|
2017-08-11 17:59:31 +03:00
|
|
|
this.$element.on("change", () => {
|
|
|
|
let value = "";
|
2016-01-26 21:12:48 +03:00
|
|
|
$.each(this.$element.files, (i, file) => {
|
2017-08-11 17:59:31 +03:00
|
|
|
value += `${file.name} , `;
|
|
|
|
});
|
|
|
|
value = value.substring(0, value.length - 2);
|
2016-01-26 21:12:48 +03:00
|
|
|
if (value) {
|
2017-08-11 17:59:31 +03:00
|
|
|
this.addIsFilled();
|
2016-01-26 21:12:48 +03:00
|
|
|
} else {
|
2017-08-11 17:59:31 +03:00
|
|
|
this.removeIsFilled();
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
2017-08-11 17:59:31 +03:00
|
|
|
this.$bmdFormGroup.find(Selector.FILENAMES).val(value);
|
|
|
|
});
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
// ------------------------------------------------------------------------
|
|
|
|
// private
|
|
|
|
|
|
|
|
// ------------------------------------------------------------------------
|
|
|
|
// static
|
|
|
|
static _jQueryInterface(config) {
|
2017-08-11 17:59:31 +03:00
|
|
|
return this.each(function() {
|
|
|
|
let $element = $(this);
|
|
|
|
let data = $element.data(DATA_KEY);
|
2016-01-26 21:12:48 +03:00
|
|
|
|
|
|
|
if (!data) {
|
2017-08-11 17:59:31 +03:00
|
|
|
data = new File($element, config);
|
|
|
|
$element.data(DATA_KEY, data);
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
2017-08-11 17:59:31 +03:00
|
|
|
});
|
2016-01-26 21:12:48 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
* jQuery
|
|
|
|
* ------------------------------------------------------------------------
|
|
|
|
*/
|
2017-08-11 17:59:31 +03:00
|
|
|
$.fn[JQUERY_NAME] = File._jQueryInterface;
|
|
|
|
$.fn[JQUERY_NAME].Constructor = File;
|
2016-01-26 21:12:48 +03:00
|
|
|
$.fn[JQUERY_NAME].noConflict = () => {
|
2017-08-11 17:59:31 +03:00
|
|
|
$.fn[JQUERY_NAME] = JQUERY_NO_CONFLICT;
|
|
|
|
return File._jQueryInterface;
|
|
|
|
};
|
2016-01-26 21:12:48 +03:00
|
|
|
|
2017-08-11 17:59:31 +03:00
|
|
|
return File;
|
|
|
|
})(jQuery);
|
2016-01-26 21:12:48 +03:00
|
|
|
|
2017-08-11 17:59:31 +03:00
|
|
|
export default File;
|