Upgrade to release v2.6.0

CHANGE.md

@@ -1,3 +1,11 @@
+version 2.6.0
+=============
+**Date:** 15-Oct-2014
+
+- (enh #42): Enhance plugin to configure the `elErrorContainer` for displaying validation errors.
+- Templatize errorContainer for display within the preview window.
+- (bug #40): More correct fix for IE (ver < 11) inability to clear fileinput values.
+
 version 2.5.0
 =============
 **Date:** 09-Oct-2014

README.md

@@ -619,6 +619,9 @@ _string_ the type of files that are to be displayed in the preview window. Defau
 
 - `{title}`: the content of the entire text file that will be displayed as a span title element.
 
+#### elErrorContainer
+_string_ the identifier for the container element displaying the error (e.g. `'#id'`). If not set, will default to the container with CSS class `kv-fileinput-error` inside the preview container (identified by `elPreviewContainer`). The `msgErrorClass` will be automatically appended to this container before displaying the error.
+
 #### elCaptionContainer
 _string_ the identifier for the container element containing the caption (e.g. `'#id'`). If not set, will default to the container with CSS class `file-caption` inside the main plugin container.
 

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "2.5.0",
+    "version": "2.6.0",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

examples/index.html

@@ -34,6 +34,10 @@
                     <button class="btn btn-primary">Submit</button>
                     <button class="btn btn-default" type="reset">Reset</button>
                 </div>
+                <div class="form-group">
+                    <input type="file" id="test-upload">
+                    <div id="errorBlock" class="help-block"></div>
+                </div>
             </form>
         </div>
     </body>
@@ -57,6 +61,13 @@
         } else {
             $('#file-4').fileinput('disable');
         }
+    });
+    $(document).ready(function() {
+        $("#test-upload").fileinput({
+            'showPreview' : true,
+            'allowedFileExtensions' : ['jpg', 'png','gif'],
+            'elErrorContainer': '#errorBlock'
+        });
     });
 	</script>
 </html>

js/fileinput.js

@@ -1,6 +1,6 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
- * @version 2.5.0
+ * @version 2.6.0
  *
  * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced 
  * features including the FileReader API. 
@@ -43,6 +43,7 @@
             '   <div class="file-preview-thumbnails"></div>\n' +
             '   <div class="clearfix"></div>' +
             '   <div class="file-preview-status text-center text-success"></div>\n' +
+            '   <div class="kv-fileinput-error"></div>\n' +
             '</div>',
         caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' +
             '   <span class="glyphicon glyphicon-file kv-caption-icon"></span><div class="file-caption-name"></div>\n' +
@@ -256,6 +257,8 @@
             self.$previewContainer = getElement(options, 'elPreviewContainer', self.$container.find('.file-preview'));
             self.$preview = getElement(options, 'elPreviewImage', self.$container.find('.file-preview-thumbnails'));
             self.$previewStatus = getElement(options, 'elPreviewStatus', self.$container.find('.file-preview-status'));
+            self.$errorContainer = getElement(options, 'elErrorContainer', self.$previewContainer.find('.kv-fileinput-error'));
+            self.$errorContainer.hide();
             var content = self.initialPreview;
             self.initialPreviewCount = isArray(content) ? content.length : (content.length > 0 ? content.split(self.initialDelimiter).length : 0)
             self.initPreview();
@@ -421,28 +424,27 @@
             this.$captionContainer.find('.kv-caption-icon').show();
         },
         resetErrors: function (fade) {
-            var self = this, $error = self.$previewContainer.find('.kv-fileinput-error');
+            var self = this, $error = self.$errorContainer;
             self.isError = false;
             self.$container.removeClass('has-error');
             if (fade) {
                 $error.fadeOut('slow');
             } else {
-                $error.remove();
+                $error.hide();
+            }
+            if (!isEmpty(self.msgErrorClass)) { 
+                $error.removeClass(self.msgErrorClass);
             }
         },
         showError: function (msg, file, previewId, index) {
-            var self = this, $error = self.$previewContainer.find('.kv-fileinput-error');
-            if (isEmpty($error.attr('class'))) {
-                self.$previewContainer.append(
-                    '<div class="kv-fileinput-error ' + self.msgErrorClass + '">' + msg + '</div>'
-                );
-            } else {
-                $error.html(msg);
+            var self = this, $error = self.$errorContainer, $el = self.$element;
+            $error.html(msg);
+            if (!isEmpty(self.msgErrorClass)) { 
+                $error.removeClass(self.msgErrorClass).addClass(self.msgErrorClass);
             }
-            $error.hide();
             $error.fadeIn(800);
-            self.$element.trigger('fileerror', [file, previewId, index]);
-            self.$element.val('');
+            $el.trigger('fileerror', [file, previewId, index]);
+            self.clearFileInput();
             self.$container.removeClass('has-error').addClass('has-error');
             return true;
         },
@@ -810,7 +812,8 @@
         elCaptionText: null,
         elPreviewContainer: null,
         elPreviewImage: null,
-        elPreviewStatus: null
+        elPreviewStatus: null,
+        elErrorContainer: null        
     };
 
     /**