feat(core): allow to pass custom selectors (#25)

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

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++) {

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 = [
+        '<input type="file" id="test" />',
+        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 () {