bs-custom-file-input.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. /*!
  2. * bsCustomFileInput v1.3.2 (https://github.com/Johann-S/bs-custom-file-input)
  3. * Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com>
  4. * Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
  5. */
  6. (function (global, factory) {
  7. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  8. typeof define === 'function' && define.amd ? define(factory) :
  9. (global = global || self, global.bsCustomFileInput = factory());
  10. }(this, function () {
  11. 'use strict';
  12. var Selector = {
  13. CUSTOMFILE: '.custom-file input[type="file"]',
  14. CUSTOMFILELABEL: '.custom-file-label',
  15. FORM: 'form',
  16. INPUT: 'input'
  17. };
  18. var textNodeType = 3;
  19. var getDefaultText = function getDefaultText(input) {
  20. var defaultText = '';
  21. var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL);
  22. if (label) {
  23. defaultText = label.innerHTML;
  24. }
  25. return defaultText;
  26. };
  27. var findFirstChildNode = function findFirstChildNode(element) {
  28. if (element.childNodes.length > 0) {
  29. var childNodes = [].slice.call(element.childNodes);
  30. for (var i = 0; i < childNodes.length; i++) {
  31. var node = childNodes[i];
  32. if (node.nodeType !== textNodeType) {
  33. return node;
  34. }
  35. }
  36. }
  37. return element;
  38. };
  39. var restoreDefaultText = function restoreDefaultText(input) {
  40. var defaultText = input.bsCustomFileInput.defaultText;
  41. var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL);
  42. if (label) {
  43. var element = findFirstChildNode(label);
  44. element.innerHTML = defaultText;
  45. }
  46. };
  47. var fileApi = !!window.File;
  48. var FAKE_PATH = 'fakepath';
  49. var FAKE_PATH_SEPARATOR = '\\';
  50. var getSelectedFiles = function getSelectedFiles(input) {
  51. if (input.hasAttribute('multiple') && fileApi) {
  52. return [].slice.call(input.files).map(function (file) {
  53. return file.name;
  54. }).join(', ');
  55. }
  56. if (input.value.indexOf(FAKE_PATH) !== -1) {
  57. var splittedValue = input.value.split(FAKE_PATH_SEPARATOR);
  58. return splittedValue[splittedValue.length - 1];
  59. }
  60. return input.value;
  61. };
  62. function handleInputChange() {
  63. var label = this.parentNode.querySelector(Selector.CUSTOMFILELABEL);
  64. if (label) {
  65. var element = findFirstChildNode(label);
  66. var inputValue = getSelectedFiles(this);
  67. if (inputValue.length) {
  68. element.innerHTML = inputValue;
  69. } else {
  70. restoreDefaultText(this);
  71. }
  72. }
  73. }
  74. function handleFormReset() {
  75. var customFileList = [].slice.call(this.querySelectorAll(Selector.INPUT)).filter(function (input) {
  76. return !!input.bsCustomFileInput;
  77. });
  78. for (var i = 0, len = customFileList.length; i < len; i++) {
  79. restoreDefaultText(customFileList[i]);
  80. }
  81. }
  82. var customProperty = 'bsCustomFileInput';
  83. var Event = {
  84. FORMRESET: 'reset',
  85. INPUTCHANGE: 'change'
  86. };
  87. var bsCustomFileInput = {
  88. init: function init(inputSelector, formSelector) {
  89. if (inputSelector === void 0) {
  90. inputSelector = Selector.CUSTOMFILE;
  91. }
  92. if (formSelector === void 0) {
  93. formSelector = Selector.FORM;
  94. }
  95. var customFileInputList = [].slice.call(document.querySelectorAll(inputSelector));
  96. var formList = [].slice.call(document.querySelectorAll(formSelector));
  97. for (var i = 0, len = customFileInputList.length; i < len; i++) {
  98. var input = customFileInputList[i];
  99. Object.defineProperty(input, customProperty, {
  100. value: {
  101. defaultText: getDefaultText(input)
  102. },
  103. writable: true
  104. });
  105. handleInputChange.call(input);
  106. input.addEventListener(Event.INPUTCHANGE, handleInputChange);
  107. }
  108. for (var _i = 0, _len = formList.length; _i < _len; _i++) {
  109. formList[_i].addEventListener(Event.FORMRESET, handleFormReset);
  110. Object.defineProperty(formList[_i], customProperty, {
  111. value: true,
  112. writable: true
  113. });
  114. }
  115. },
  116. destroy: function destroy() {
  117. var formList = [].slice.call(document.querySelectorAll(Selector.FORM)).filter(function (form) {
  118. return !!form.bsCustomFileInput;
  119. });
  120. var customFileInputList = [].slice.call(document.querySelectorAll(Selector.INPUT)).filter(function (input) {
  121. return !!input.bsCustomFileInput;
  122. });
  123. for (var i = 0, len = customFileInputList.length; i < len; i++) {
  124. var input = customFileInputList[i];
  125. restoreDefaultText(input);
  126. input[customProperty] = undefined;
  127. input.removeEventListener(Event.INPUTCHANGE, handleInputChange);
  128. }
  129. for (var _i2 = 0, _len2 = formList.length; _i2 < _len2; _i2++) {
  130. formList[_i2].removeEventListener(Event.FORMRESET, handleFormReset);
  131. formList[_i2][customProperty] = undefined;
  132. }
  133. }
  134. };
  135. return bsCustomFileInput;
  136. }));
  137. //# sourceMappingURL=bs-custom-file-input.js.map
  138. document.addEventListener("DOMContentLoaded", function () {
  139. bsCustomFileInput.init()
  140. });