diff --git a/README.md b/README.md index ef710bd..19a1687 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,8 @@ Features: - Display file name - Display file names for `multiple` input - Reset your custom file input to its initial state +- Handle form reset +- Allow custom selectors for input, and form - Small, only **2kb** and less if you gzip it ## Table of contents @@ -71,6 +73,19 @@ This library is UMD ready so you can use it everywhere. Finds your Bootstrap custom file input and will make them dynamic. +#### Parameters + +- inputSelector + - *default value*: `.custom-file input[type="file"]` + - *type*: `string` + + You can pass a custom input selector, but be sure to pass a **file input selector** +- formSelector + - *default value*: `form` + - *type*: `string` + + Allows you to pass a custom form selector, but be sure to pass a **form selector** + ### destroy Removes this plugin from your Bootstrap custom file input and restore them at their first initial state diff --git a/src/index.js b/src/index.js index 475475e..3e137d1 100644 --- a/src/index.js +++ b/src/index.js @@ -15,9 +15,15 @@ const Event = { const customProperty = 'bsCustomFileInput' const bsCustomFileInput = { - init() { - const customFileInputList = [].slice.call(document.querySelectorAll(Selector.CUSTOMFILE)) - const formList = [].slice.call(document.querySelectorAll(Selector.FORM)) + customInputSelector: null, + customFormSelector: null, + + init(inputSelector = Selector.CUSTOMFILE, formSelector = Selector.FORM) { + this.customInputSelector = inputSelector + this.customFormSelector = formSelector + + const customFileInputList = [].slice.call(document.querySelectorAll(this.customInputSelector)) + const formList = [].slice.call(document.querySelectorAll(this.customFormSelector)) for (let i = 0, len = customFileInputList.length; i < len; i++) { const input = customFileInputList[i] @@ -38,8 +44,8 @@ const bsCustomFileInput = { }, destroy() { - const formList = [].slice.call(document.querySelectorAll(Selector.FORM)) - const customFileInputList = [].slice.call(document.querySelectorAll(Selector.CUSTOMFILE)) + const formList = [].slice.call(document.querySelectorAll(this.customFormSelector)) + const customFileInputList = [].slice.call(document.querySelectorAll(this.customInputSelector)) .filter((input) => !!input.bsCustomFileInput) for (let i = 0, len = customFileInputList.length; i < len; i++) { diff --git a/tests/main.spec.js b/tests/main.spec.js index f4fe9e6..aaa7ab8 100644 --- a/tests/main.spec.js +++ b/tests/main.spec.js @@ -31,7 +31,7 @@ describe('bsCustomInputFile', function () { it('should add bsCustomFileInput property', function () { bsCustomFileInput.init() - expect(input.bsCustomFileInput).to.not.undefined + expect(input.bsCustomFileInput).not.undefined }) it('should store default text', function () { @@ -62,6 +62,28 @@ describe('bsCustomInputFile', function () { expect(spy.called).to.be.true }) + + it('should store custom input selector and custom form selector', function () { + bsCustomFileInput.init('input', '.form') + + expect(bsCustomFileInput.customInputSelector).equal('input') + expect(bsCustomFileInput.customFormSelector).equal('.form') + }) + + it('should select only my custom input selector', function () { + mochaFixtureDiv.innerHTML = [ + '', + customInputFile, + ].join('') + + bsCustomFileInput.init('#test') + + var testInput = document.getElementById('test') + var otherInput = document.querySelector('.custom-file input[type="file"]') + + expect(testInput.bsCustomFileInput).not.undefined + expect(otherInput.bsCustomFileInput).undefined + }) }) describe('destroy', function () {