168 lines
4.9 KiB
JavaScript
168 lines
4.9 KiB
JavaScript
/*!
|
|
* bsCustomFileInput v1.3.2 (https://github.com/Johann-S/bs-custom-file-input)
|
|
* Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com>
|
|
* Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
|
|
*/
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
typeof define === 'function' && define.amd ? define(factory) :
|
|
(global = global || self, global.bsCustomFileInput = factory());
|
|
}(this, function () { 'use strict';
|
|
|
|
var Selector = {
|
|
CUSTOMFILE: '.custom-file input[type="file"]',
|
|
CUSTOMFILELABEL: '.custom-file-label',
|
|
FORM: 'form',
|
|
INPUT: 'input'
|
|
};
|
|
|
|
var textNodeType = 3;
|
|
|
|
var getDefaultText = function getDefaultText(input) {
|
|
var defaultText = '';
|
|
var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL);
|
|
|
|
if (label) {
|
|
defaultText = label.innerHTML;
|
|
}
|
|
|
|
return defaultText;
|
|
};
|
|
|
|
var findFirstChildNode = function findFirstChildNode(element) {
|
|
if (element.childNodes.length > 0) {
|
|
var childNodes = [].slice.call(element.childNodes);
|
|
|
|
for (var i = 0; i < childNodes.length; i++) {
|
|
var node = childNodes[i];
|
|
|
|
if (node.nodeType !== textNodeType) {
|
|
return node;
|
|
}
|
|
}
|
|
}
|
|
|
|
return element;
|
|
};
|
|
|
|
var restoreDefaultText = function restoreDefaultText(input) {
|
|
var defaultText = input.bsCustomFileInput.defaultText;
|
|
var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL);
|
|
|
|
if (label) {
|
|
var element = findFirstChildNode(label);
|
|
element.innerHTML = defaultText;
|
|
}
|
|
};
|
|
|
|
var fileApi = !!window.File;
|
|
var FAKE_PATH = 'fakepath';
|
|
var FAKE_PATH_SEPARATOR = '\\';
|
|
|
|
var getSelectedFiles = function getSelectedFiles(input) {
|
|
if (input.hasAttribute('multiple') && fileApi) {
|
|
return [].slice.call(input.files).map(function (file) {
|
|
return file.name;
|
|
}).join(', ');
|
|
}
|
|
|
|
if (input.value.indexOf(FAKE_PATH) !== -1) {
|
|
var splittedValue = input.value.split(FAKE_PATH_SEPARATOR);
|
|
return splittedValue[splittedValue.length - 1];
|
|
}
|
|
|
|
return input.value;
|
|
};
|
|
|
|
function handleInputChange() {
|
|
var label = this.parentNode.querySelector(Selector.CUSTOMFILELABEL);
|
|
|
|
if (label) {
|
|
var element = findFirstChildNode(label);
|
|
var inputValue = getSelectedFiles(this);
|
|
|
|
if (inputValue.length) {
|
|
element.innerHTML = inputValue;
|
|
} else {
|
|
restoreDefaultText(this);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleFormReset() {
|
|
var customFileList = [].slice.call(this.querySelectorAll(Selector.INPUT)).filter(function (input) {
|
|
return !!input.bsCustomFileInput;
|
|
});
|
|
|
|
for (var i = 0, len = customFileList.length; i < len; i++) {
|
|
restoreDefaultText(customFileList[i]);
|
|
}
|
|
}
|
|
|
|
var customProperty = 'bsCustomFileInput';
|
|
var Event = {
|
|
FORMRESET: 'reset',
|
|
INPUTCHANGE: 'change'
|
|
};
|
|
var bsCustomFileInput = {
|
|
init: function init(inputSelector, formSelector) {
|
|
if (inputSelector === void 0) {
|
|
inputSelector = Selector.CUSTOMFILE;
|
|
}
|
|
|
|
if (formSelector === void 0) {
|
|
formSelector = Selector.FORM;
|
|
}
|
|
|
|
var customFileInputList = [].slice.call(document.querySelectorAll(inputSelector));
|
|
var formList = [].slice.call(document.querySelectorAll(formSelector));
|
|
|
|
for (var i = 0, len = customFileInputList.length; i < len; i++) {
|
|
var input = customFileInputList[i];
|
|
Object.defineProperty(input, customProperty, {
|
|
value: {
|
|
defaultText: getDefaultText(input)
|
|
},
|
|
writable: true
|
|
});
|
|
handleInputChange.call(input);
|
|
input.addEventListener(Event.INPUTCHANGE, handleInputChange);
|
|
}
|
|
|
|
for (var _i = 0, _len = formList.length; _i < _len; _i++) {
|
|
formList[_i].addEventListener(Event.FORMRESET, handleFormReset);
|
|
|
|
Object.defineProperty(formList[_i], customProperty, {
|
|
value: true,
|
|
writable: true
|
|
});
|
|
}
|
|
},
|
|
destroy: function destroy() {
|
|
var formList = [].slice.call(document.querySelectorAll(Selector.FORM)).filter(function (form) {
|
|
return !!form.bsCustomFileInput;
|
|
});
|
|
var customFileInputList = [].slice.call(document.querySelectorAll(Selector.INPUT)).filter(function (input) {
|
|
return !!input.bsCustomFileInput;
|
|
});
|
|
|
|
for (var i = 0, len = customFileInputList.length; i < len; i++) {
|
|
var input = customFileInputList[i];
|
|
restoreDefaultText(input);
|
|
input[customProperty] = undefined;
|
|
input.removeEventListener(Event.INPUTCHANGE, handleInputChange);
|
|
}
|
|
|
|
for (var _i2 = 0, _len2 = formList.length; _i2 < _len2; _i2++) {
|
|
formList[_i2].removeEventListener(Event.FORMRESET, handleFormReset);
|
|
|
|
formList[_i2][customProperty] = undefined;
|
|
}
|
|
}
|
|
};
|
|
|
|
return bsCustomFileInput;
|
|
|
|
}));
|
|
//# sourceMappingURL=bs-custom-file-input.js.map
|