Upgrade to v1.6.0

CHANGE.md

@@ -1,3 +1,11 @@
+version 1.6.0
+=============
+Date: 03-Jun-2014
+
+### Additions
+1. The plugin now offers an additional `refresh` method. This enables you to dynamically change element attributes or plugin options
+   at runtime and refresh the widget.
+
 version 1.5.0
 =============
 Date: 23-May-2014

README.md

@@ -5,7 +5,7 @@ An enhanced HTML 5 file input for Bootstrap 3.x with file preview for images and
 
 ![File Input Screenshot](https://lh6.googleusercontent.com/-2niyujIaat0/UyqzA_78OQI/AAAAAAAAADE/f6IJkr11uA8/w666-h418-no/fileinput-screenshot.jpg)
 
-> NOTE: The latest version of the plugin v1.5.0 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
+> NOTE: The latest version of the plugin v1.6.0 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
 
 ## Features  
 
@@ -32,7 +32,7 @@ An enhanced HTML 5 file input for Bootstrap 3.x with file preview for images and
 11. Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.
 12. Triggers JQuery events for advanced development. Events currently available are `filereset` and `fileclear`.
 13. Disabled and readonly file input support.
-14. Size of the entire plugin is less than 11KB (about 9KB for the minified JS and 2KB for the minified CSS).
+14. Size of the entire plugin is about 5KB if gzipped. The minified assets are less than 12KB (about 10KB for the minified JS and 2KB for the minified CSS). 
 
 ## Demo
 

bower.json

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

css/fileinput.css

@@ -1,7 +1,7 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
  * @package yii2-widgets
- * @version 1.0.0
+ * @version 1.6.0
  *
  * File input styling for Bootstrap 3.0
  * Built for Yii Framework 2.0

css/fileinput.min.css

@@ -1,7 +1,7 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
  * @package yii2-widgets
- * @version 1.0.0
+ * @version 1.6.0
  *
  * File input styling for Twitter Bootstrap 3.0
  * Built for Yii Framework 2.0

examples/index.html

@@ -22,6 +22,10 @@
                     <input id="file-3" type="file" multiple=true>
                 </div>
                 <div class="form-group">
+                    <input id="file-4" type="file" class="file">
+                </div>
+                <div class="form-group">
+                    <button class="btn btn-warning" type="button">Disable Test</button>
                     <button class="btn btn-primary">Submit</button>
                     <button class="btn btn-default" type="reset">Reset</button>
                 </div>
@@ -37,5 +41,9 @@
 		browseClass: "btn btn-primary btn-lg",
 		fileType: "any"
 	});
+    $(".btn-warning").on('click', function() {
+        $("#file-4").attr('disabled', 'disabled');
+        $('#file-4').fileinput('refresh', {browseLabel: 'Kartik'});
+    });
 	</script>
 </html>

js/fileinput.js

@@ -1,6 +1,6 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
- * @version 1.5.0
+ * @version 1.6.0
  *
  * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced 
  * features including the FileReader API. This plugin is inspired by the blog article at
@@ -77,77 +77,91 @@
     };
     var FileInput = function (element, options) {
         this.$element = $(element);
-        this.showCaption = options.showCaption;
-        this.showPreview = options.showPreview;
-        this.initialPreview = options.initialPreview;
-        this.initialCaption = options.initialCaption;
-        this.showRemove = options.showRemove;
-        this.showUpload = options.showUpload;
-        this.captionClass = options.captionClass;
-        this.previewClass = options.previewClass;
-        this.mainClass = options.mainClass;
-        if (isEmpty(options.mainTemplate)) {
-            this.mainTemplate = this.showCaption ? MAIN_TEMPLATE_1 : MAIN_TEMPLATE_2;
-        }
-        else {
-            this.mainTemplate = options.mainTemplate;
-        }
-        this.previewTemplate = (this.showPreview) ? options.previewTemplate : '';
-        this.captionTemplate = options.captionTemplate;
-        this.browseLabel = options.browseLabel;
-        this.browseIcon = options.browseIcon;
-        this.browseClass = options.browseClass;
-        this.removeLabel = options.removeLabel;
-        this.removeIcon = options.removeIcon;
-        this.removeClass = options.removeClass;
-        this.uploadLabel = options.uploadLabel;
-        this.uploadIcon = options.uploadIcon;
-        this.uploadClass = options.uploadClass;
-        this.uploadUrl = options.uploadUrl;
-        this.msgLoading = options.msgLoading;
-        this.msgProgress = options.msgProgress;
-        this.msgSelected = options.msgSelected;
-        this.previewFileType = options.previewFileType;
-        this.wrapTextLength = options.wrapTextLength;
-        this.wrapIndicator = options.wrapIndicator;
-        this.isDisabled = this.$element.attr('disabled') || this.$element.attr('readonly');
-        if (isEmpty(this.$element.attr('id'))) {
-            this.$element.attr('id', uniqId());
-        }
-        this.$container = this.createContainer();
-        /* Initialize plugin option parameters */
-        this.$captionContainer = getElement(options, 'elCaptionContainer', this.$container.find('.file-caption'));
-        this.$caption = getElement(options, 'elCaptionText', this.$container.find('.file-caption-name'));
-        this.$previewContainer = getElement(options, 'elPreviewContainer', this.$container.find('.file-preview'));
-        this.$preview = getElement(options, 'elPreviewImage', this.$container.find('.file-preview-thumbnails'));
-        this.$previewStatus = getElement(options, 'elPreviewStatus', this.$container.find('.file-preview-status'));
-        this.initPreview();
-        this.$name = this.$element.attr('name') || options.name;
-        this.$hidden = this.$container.find('input[type=hidden][name="' + this.$name + '"]');
-        if (this.$hidden.length === 0) {
-            this.$hidden = $('<input type="hidden" />');
-            this.$container.prepend(this.$hidden);
-        }
-        this.original = {
-            preview: this.$preview.html(),
-            caption: this.$caption.html(),
-            hiddenVal: this.$hidden.val()
-        };
-        this.listen()
+        this.options = options;
+        this.init(options);
+        this.listen();
     };
 
     FileInput.prototype = {
         constructor: FileInput,
+        init: function (options) {
+            var self = this;
+            self.showCaption = options.showCaption;
+            self.showPreview = options.showPreview;
+            self.initialPreview = options.initialPreview;
+            self.initialCaption = options.initialCaption;
+            self.showRemove = options.showRemove;
+            self.showUpload = options.showUpload;
+            self.captionClass = options.captionClass;
+            self.previewClass = options.previewClass;
+            self.mainClass = options.mainClass;
+            if (isEmpty(options.mainTemplate)) {
+                self.mainTemplate = self.showCaption ? MAIN_TEMPLATE_1 : MAIN_TEMPLATE_2;
+            }
+            else {
+                self.mainTemplate = options.mainTemplate;
+            }
+            self.previewTemplate = (self.showPreview) ? options.previewTemplate : '';
+            self.captionTemplate = options.captionTemplate;
+            self.browseLabel = options.browseLabel;
+            self.browseIcon = options.browseIcon;
+            self.browseClass = options.browseClass;
+            self.removeLabel = options.removeLabel;
+            self.removeIcon = options.removeIcon;
+            self.removeClass = options.removeClass;
+            self.uploadLabel = options.uploadLabel;
+            self.uploadIcon = options.uploadIcon;
+            self.uploadClass = options.uploadClass;
+            self.uploadUrl = options.uploadUrl;
+            self.msgLoading = options.msgLoading;
+            self.msgProgress = options.msgProgress;
+            self.msgSelected = options.msgSelected;
+            self.previewFileType = options.previewFileType;
+            self.wrapTextLength = options.wrapTextLength;
+            self.wrapIndicator = options.wrapIndicator;
+            self.isDisabled = self.$element.attr('disabled') || self.$element.attr('readonly');
+            if (isEmpty(self.$element.attr('id'))) {
+                self.$element.attr('id', uniqId());
+            }
+            if (typeof self.$container == 'undefined') {
+                self.$container = self.createContainer();
+            }
+            else {
+                self.$container.html(self.renderMain());
+            }
+            /* Initialize plugin option parameters */
+            self.$captionContainer = getElement(options, 'elCaptionContainer', self.$container.find('.file-caption'));
+            self.$caption = getElement(options, 'elCaptionText', self.$container.find('.file-caption-name'));
+            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.initPreview();
+            self.$name = self.$element.attr('name') || options.name;
+            self.$hidden = self.$container.find('input[type=hidden][name="' + self.$name + '"]');
+            if (self.$hidden.length === 0) {
+                self.$hidden = $('<input type="hidden" />');
+                self.$container.prepend(self.$hidden);
+            }
+            self.original = {
+                preview: self.$preview.html(),
+                caption: self.$caption.html(),
+                hiddenVal: self.$hidden.val()
+            };
+        },
         listen: function () {
             var self = this;
             self.$element.on('change', $.proxy(self.change, self));
             $(self.$element[0].form).on('reset', $.proxy(self.reset, self));
             self.$container.find('.fileinput-remove').on('click', $.proxy(self.clear, self));
         },
-        trigger: function (e) {
+        refresh: function (options) {
             var self = this;
-            self.$element.trigger('click');
-            e.preventDefault();
+            if (arguments.length) {
+                self.init($.extend(self.options, options));
+            }
+            else {
+                self.init(self.options);
+            }
         },
         initPreview: function () {
             var self = this, html = '',