bs-custom-file-input.js 4.9 KB

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