Fix #264: Validate input type of file before initializing plugin

CHANGE.md

@@ -20,6 +20,7 @@ version 4.1.9
 16. (enh #258): Enhance messages to include file plural and single.
 17. (enh #259): Add Polish translations.
 18. (enh #263): Enhance parsing of file preview thumbnails and actions.
+19. (enh #264): Validate input type of file before initializing plugin.
 
 version 4.1.8
 =============

examples/index.html

@@ -16,41 +16,56 @@
             <h1>Bootstrap File Input Example <small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i class="glyphicon glyphicon-download"></i> Download Sample Files</a></small></h1>
             </div>
             <form enctype="multipart/form-data">
-                <input id="file-0" class="file" type="file" multiple data-min-file-count="1">
+                <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
                 <br>
                 <button type="submit" class="btn btn-primary">Submit</button>
                 <button type="reset" class="btn btn-default">Reset</button>
             </form>
-            <br>
+            <hr>
+            <form enctype="multipart/form-data">
+                <label>Test invalid input type</label>
+                <input id="file-0b" class="file" type="text" multiple data-min-file-count="1">
+                <script>
+                $(document).on('ready', function(){$("#file-0b").fileinput();});
+                </script>
+            </form>
+            <hr>
             <form enctype="multipart/form-data">
                 <input id="file-0a" class="file" type="file" multiple data-min-file-count="3">
-                <br>
+                <hr>
                  <div class="form-group">
                     <input id="file-0b" class="file" type="file">
                 </div>
+                <hr>
                 <div class="form-group">
                     <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                 </div>
+                <hr>
                 <div class="form-group">
                     <input id="file-2" type="file" class="file" readonly data-show-upload="false">
                 </div> 
+                <hr>
                 <div class="form-group">
                     <label>Preview File Icon</label>
                     <input id="file-3" type="file" multiple=true>
                 </div>
+                <hr>
                 <div class="form-group">
                     <input id="file-4" type="file" class="file" data-upload-url="#">
                 </div>
+                <hr>
                 <div class="form-group">
                     <button class="btn btn-warning" type="button">Disable Test</button>
                     <button class="btn btn-info" type="reset">Refresh Test</button>
                     <button class="btn btn-primary">Submit</button>
                     <button class="btn btn-default" type="reset">Reset</button>
                 </div>
+                <hr>
                 <div class="form-group">
                     <input type="file" class="file" id="test-upload" multiple>
                     <div id="errorBlock" class="help-block"></div>
                 </div>
+                <hr>
                 <div class="form-group">
                     <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-preview-file-icon="">
                 </div>

js/fileinput.js

@@ -427,17 +427,33 @@
         },
         objUrl = window.URL || window.webkitURL,
         FileInput = function (element, options) {
-            this.$element = $(element);
+            var self = this;
+            self.$element = $(element);
+            if (!self.validate()) {
+                return;
+            }
             if (hasFileAPISupport() || isIE(9)) {
-                this.init(options);
-                this.listen();
+                self.init(options);
+                self.listen();
             } else {
-                this.$element.removeClass('file-loading');
+                self.$element.removeClass('file-loading');
             }
         };
 
     FileInput.prototype = {
         constructor: FileInput,
+        validate: function() {
+            var self = this, $exception;
+            if (self.$element.attr('type') === 'file') {
+                return true;
+            }
+            $exception = '<div class="help-block alert alert-warning">' +
+                '<h4>Invalid Input Type</h4>' +
+                'You must set an input <code>type = file</code> for <b>bootstrap-fileinput</b> plugin to initialize.' +
+                '</div>';
+            self.$element.after($exception);
+            return false;
+        },
         init: function (options) {
             var self = this, $el = self.$element, t;
             $.each(options, function (key, value) {