Upgrade to v1.5.0

CHANGE.md

@@ -1,5 +1,25 @@
+version 1.5.0
+=============
+Date: 23-May-2014
+
+### Additions
+1. The plugin now offers an option to display initial preview of images/text/other files. This is useful
+   for record update scenarios. This can be a single image/file or an array of images/files.
+2. Extending to the above feature, the plugin also allows you to set a preview caption for the initial preview field.
+
+### Changes
+3. The following element identifiers need to be passed as a string like '#id' instead of a JQuery object:
+    
+- elCaptionContainer
+- elCaptionText
+- elPreviewContainer
+- elPreviewImage
+- elPreviewStatus
+
+
 version 1.0.0
 =============
+Date: 01-Jan-2014 
 
 Initial release. The following features are included in this release:
 

README.md

@@ -150,6 +150,45 @@ The `mainTemplate` if not passed, will be automatically set based on `showCaptio
 {preview}\n{remove}\n{upload}\n{browse}\n
 ```
 
+#### initialPreview
+
+_string|array_ the initial preview content to be displayed. You can pass the minimal HTML markup for displaying your image, text, or file. 
+If set as a string, this will display a single file in the initial preview. If set as an array, it will display all files in the array as an 
+initial preview (useful for multiple file upload scenarios).
+
+The following CSS classes will need to be added for displaying each file type as per the plugin style theme:
+
+- **image files:** Include CSS class `file-preview-image`
+- **text files:** Include CSS class `file-preview-text`
+- **other files:** Include CSS class `file-preview-other`
+
+Examples of how you can setup various files for initial preview:
+
+```js
+// for image files
+initialPreview: [
+    "<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>",
+    "<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>",
+],
+
+// for text files
+initialPreview: "<div class='file-preview-text' title='NOTES.txt'>" +
+    "This is the sample text file content upto wrapTextLength of 250 characters" +
+    "<span class='wrap-indicator' onclick='$(\"#show-detailed-text\").modal(\"show\")' title='NOTES.txt'>[…]</span>" +
+    "</div>"
+
+// for other files    
+initialPreview: "<div class='file-preview-text'>" + 
+    "<h2><i class='glyphicon glyphicon-file'></i></h2>" +
+    "Filename.xlsx" + "</div>"
+```
+
+#### initialCaption
+
+_string_ the initial preview caption text to be displayed. If you do not set a value here and `initialPreview`,
+ this will default to `"{preview-file-count} files selected"`, where `{preview-file-count}` is the count of the
+ files passed in `initialPreview`.
+ 
 #### captionTemplate
 _string_ the template used to render the caption. The following template variables will be parsed:
 
@@ -239,19 +278,19 @@ _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.
 
 #### elCaptionContainer
-_DOM Element_ the container element containing the caption. If not set, will default to the container with CSS class `file-caption` inside the main plugin container.
+_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.
 
 #### elCaptionText
-_DOM Element_ the container element containing the caption text. If not set, will default to the container with CSS class `file-caption-name` inside the main plugin container.
+_string_ the identifier for the container element containing the caption text (e.g. `'#id'`). If not set, will default to the container with CSS class `file-caption-name` inside the main plugin container.
 
 #### elPreviewContainer
-_DOM Element_ the container element containing the preview. If not set, will default to the container with CSS class `file-preview` inside the main plugin container.
+_string_ the identifier for the container element containing the preview (e.g. `'#id'`). If not set, will default to the container with CSS class `file-preview` inside the main plugin container.
 
 #### elPreviewImage
-_DOM Element_ the container element containing the preview image thumbnails. If not set, will default to the container with CSS class `file-preview-thumbnails` inside the main plugin container.
+_string_ the identifier for the element containing the preview image thumbnails (e.g. `'#id'`). If not set, will default to the container with CSS class `file-preview-thumbnails` inside the main plugin container.
 
 #### elPreviewStatus
-_DOM Element_ the container element containing the preview progress status. If not set, will default to the container with CSS class `file-preview-status` inside the main plugin container.
+_string_ the identifier for the element containing the preview progress status (e.g. `'#id'`). If not set, will default to the container with CSS class `file-preview-status` inside the main plugin container.
 
 ### Plugin Events
 The plugin supports these events:

examples/index.html

@@ -6,7 +6,7 @@
         <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
         <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="../js/fileinput.min.js" type="text/javascript"></script>
+        <script src="../js/fileinput.js" type="text/javascript"></script>
     </head>
     <body>
         <div class="container">
@@ -29,6 +29,9 @@
         </div>
     </body>
 	<script>
+    $("#file-1").fileinput({
+        initialPreview: ["<img src='Desert.jpg' class='file-preview-image'>", "<img src='Jellyfish.jpg' class='file-preview-image'>"]
+	});
 	$("#file-3").fileinput({
 		showCaption: false,
 		browseClass: "btn btn-primary btn-lg",

js/fileinput.js

@@ -1,6 +1,6 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
- * @version 1.0.0
+ * @version 1.5.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
@@ -57,9 +57,15 @@
         return value === null || value === undefined || value == []
             || value === '' || trim && $.trim(value) === '';
     };
+    var isArray = Array.isArray || function (a) {
+        return Object.prototype.toString.call(a) === '[object Array]';
+    };
     var getValue = function (options, param, value) {
         return (isEmpty(options) || isEmpty(options[param])) ? value : options[param];
     };
+    var getElement = function (options, param, value) {
+        return (isEmpty(options) || isEmpty(options[param])) ? value : $(options[param]);
+    };
     var isImageFile = function (type, name) {
         return (typeof type !== "undefined") ? type.match('image.*') : name.match(/\.(gif|png|jpe?g)$/i);
     };
@@ -73,6 +79,8 @@
         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;
@@ -84,7 +92,7 @@
         else {
             this.mainTemplate = options.mainTemplate;
         }
-        this.previewTemplate = (this.showPreview) ? options.previewTemplate : '';        
+        this.previewTemplate = (this.showPreview) ? options.previewTemplate : '';
         this.captionTemplate = options.captionTemplate;
         this.browseLabel = options.browseLabel;
         this.browseIcon = options.browseIcon;
@@ -108,11 +116,12 @@
         }
         this.$container = this.createContainer();
         /* Initialize plugin option parameters */
-        this.$captionContainer = getValue(options, 'elCaptionContainer', this.$container.find('.file-caption'));
-        this.$caption = getValue(options, 'elCaptionText', this.$container.find('.file-caption-name'));
-        this.$previewContainer = getValue(options, 'elPreviewContainer', this.$container.find('.file-preview'));
-        this.$preview = getValue(options, 'elPreviewImage', this.$container.find('.file-preview-thumbnails'));
-        this.$previewStatus = getValue(options, 'elPreviewStatus', this.$container.find('.file-preview-status'));
+        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) {
@@ -121,6 +130,7 @@
         }
         this.original = {
             preview: this.$preview.html(),
+            caption: this.$caption.html(),
             hiddenVal: this.$hidden.val()
         };
         this.listen()
@@ -139,12 +149,36 @@
             self.$element.trigger('click');
             e.preventDefault();
         },
+        initPreview: function () {
+            var self = this, html = '',
+                content = self.initialPreview,
+                len = self.initialPreview.length,
+                cap = self.initialCaption.length,
+                caption = (cap > 0) ? self.initialCaption : len + ' file selected';
+            if (isArray(content) && len > 0) {
+                for (var i = 0; i < len; i++) {
+                    html += '<div class="file-preview-frame">' + content[i] + "</div>\n";
+                }
+                self.$preview.html(html);
+                if (len > 1 && cap == 0) {
+                    caption = len + ' files selected';
+                }
+            }
+            else if (len > 0) {
+                html = '<div class="file-preview-frame">' + content + '</div>';
+            }
+            else {
+                return;
+            }
+            self.$preview.html(html);
+            self.$caption.html(caption);
+            self.$container.removeClass('file-input-new');
+        },
         clear: function (e) {
             var self = this;
             if (e) {
                 e.preventDefault();
             }
-
             self.$hidden.val('');
             self.$hidden.attr('name', self.name);
             self.$element.attr('name', '');
@@ -162,8 +196,12 @@
             self.clear(false);
             self.$hidden.val(self.original.hiddenVal);
             self.$preview.html(self.original.preview);
+            self.$caption.html(self.original.caption);
             self.$container.find('.fileinput-filename').text('');
             self.$element.trigger('filereset');
+            if (self.initialPreview.length > 0) {
+                self.$container.removeClass('file-input-new');
+            }
         },
         change: function (e) {
             var self = this;
@@ -335,6 +373,8 @@
         previewClass: '',
         mainClass: '',
         mainTemplate: null,
+        initialPreview: '',
+        initialCaption: '',
         previewTemplate: PREVIEW_TEMPLATE,
         captionTemplate: CAPTION_TEMPLATE,
         browseLabel: 'Browse &hellip;',