Fix #9: Upgraded to release v1.8.0

CHANGE.md

@@ -1,3 +1,10 @@
+version 1.8.0
+=============
+Date: 15-Jul-2014
+
+### Additions
+1. (enh #9): Enhanced caption template and styling for captions to prevent overflow of long file names out of the caption container.
+
 version 1.7.0
 =============
 Date: 02-Jul-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.7.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.8.0 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
 
 ## Features  
 

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "1.7.0",
+    "version": "1.8.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.6.0
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
+ * @package bootstrap-fileinput
+ * @version 1.8.0
  *
  * File input styling for Bootstrap 3.0
  * Built for Yii Framework 2.0
@@ -40,6 +40,22 @@
     display: block;
 }
 
+.file-caption .glyphicon {
+    display: inline-block;
+    min-width: 18px;
+    float: left;
+    margin-top: 2px;
+}
+
+.file-caption-name {
+    display: inline-block;
+    float: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 85%;
+}
+
 .file-caption-disabled {
     background-color: #EEEEEE;
     cursor: not-allowed;

css/fileinput.min.css

@@ -1,11 +1,11 @@
 /*!
- * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
- * @package yii2-widgets
- * @version 1.6.0
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
+ * @package bootstrap-fileinput
+ * @version 1.8.0
  *
  * File input styling for Bootstrap 3.0
  * Built for Yii Framework 2.0
  * Author: Kartik Visweswaran
  * Year: 2013
  * For more Yii related demos visit http://demos.krajee.com
- */.file-loading{top:0;right:0;width:25px;height:25px;font-size:999px;text-align:right;color:#fff;background:transparent url(../img/loading.gif) top left no-repeat;border:none}.btn-file{position:relative;overflow:hidden}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:999px;text-align:right;filter:alpha(opacity=0);opacity:0;background:red;cursor:inherit;display:block}.file-caption-disabled{background-color:#EEE;cursor:not-allowed;opacity:1}.file-input .btn .disabled,.file-input .btn[disabled]{cursor:not-allowed}.file-preview{border-radius:5px;border:1px solid #ddd;padding:5px;width:100%;margin-bottom:5px}.file-preview-frame{display:table;margin:8px;height:160px;border:1px solid #ddd;box-shadow:1px 1px 5px 0 #a2958a;padding:6px;float:left;text-align:center}.file-preview-frame:hover{background-color:#eee;box-shadow:2px 2px 5px 0 #333}.file-preview-image{height:150px;vertical-align:text-center}.file-preview-text{display:table-cell;width:150px;height:150px;color:#428bca;font-size:11px;vertical-align:middle;text-align:center}.file-preview-other{display:table-cell;width:150px;height:150px;font-family:Monaco,Consolas,monospace;font-size:11px;vertical-align:middle;text-align:center}.file-input-new .close,.file-input-new .file-preview,.file-input-new .fileinput-remove-button,.file-input-new .fileinput-upload-button,.file-input-new .glyphicon-file{display:none}.loading{background:transparent url(../img/loading.gif) no-repeat scroll center center content-box!important}.wrap-indicator{font-weight:700;color:#245269;cursor:pointer}
+ */.file-loading{top:0;right:0;width:25px;height:25px;font-size:999px;text-align:right;color:#fff;background:transparent url(../img/loading.gif) top left no-repeat;border:none}.btn-file{position:relative;overflow:hidden}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:999px;text-align:right;filter:alpha(opacity=0);opacity:0;background:red;cursor:inherit;display:block}.file-caption .glyphicon{display:inline-block;min-width:18px;float:left;margin-top:2px}.file-caption-name{display:inline-block;float:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:85%}.file-caption-disabled{background-color:#EEE;cursor:not-allowed;opacity:1}.file-input .btn .disabled,.file-input .btn[disabled]{cursor:not-allowed}.file-preview{border-radius:5px;border:1px solid #ddd;padding:5px;width:100%;margin-bottom:5px}.file-preview-frame{display:table;margin:8px;height:160px;border:1px solid #ddd;box-shadow:1px 1px 5px 0 #a2958a;padding:6px;float:left;text-align:center}.file-preview-frame:hover{background-color:#eee;box-shadow:2px 2px 5px 0 #333}.file-preview-image{height:150px;vertical-align:text-center}.file-preview-text{display:table-cell;width:150px;height:150px;color:#428bca;font-size:11px;vertical-align:middle;text-align:center}.file-preview-other{display:table-cell;width:150px;height:150px;font-family:Monaco,Consolas,monospace;font-size:11px;vertical-align:middle;text-align:center}.file-input-new .close,.file-input-new .file-preview,.file-input-new .fileinput-remove-button,.file-input-new .fileinput-upload-button,.file-input-new .glyphicon-file{display:none}.loading{background:transparent url(../img/loading.gif) no-repeat scroll center center content-box!important}.wrap-indicator{font-weight:700;color:#245269;cursor:pointer}

js/fileinput.js

@@ -1,6 +1,6 @@
 /*!
- * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
- * @version 1.7.0
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
+ * @version 1.8.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
@@ -36,7 +36,7 @@
         '</div>';
 
     var CAPTION_TEMPLATE = '<div class="form-control file-caption {class}">\n' +
-        '   <span class="glyphicon glyphicon-file"></span> <span class="file-caption-name"></span>\n' +
+        '   <span class="glyphicon glyphicon-file"></span><div class="file-caption-name"></div>\n' +
         '</div>';
 
     var MODAL_TEMPLATE = '<div id="{id}" class="modal fade">\n' +
@@ -176,6 +176,7 @@
             self.initialPreviewContent = html;
             self.$preview.html(html);
             self.$caption.html(caption);
+            self.$captionContainer.attr('title', caption);            
             self.$container.removeClass('file-input-new');
         },
         clear: function (e) {
@@ -196,6 +197,7 @@
             else {
                 self.$preview.html('');
                 self.$caption.html('');
+                self.$captionContainer.attr('title', '');
                 self.$container.removeClass('file-input-new').addClass('file-input-new');
             }
         },
@@ -287,6 +289,7 @@
 
             var log = numFiles > 1 ? msgSelected.replace('{n}', numFiles) : label;
             self.$caption.html(log);
+            self.$captionContainer.attr('title', log);
             self.$container.removeClass('file-input-new');
             elem.trigger('fileselect', [numFiles, label]);
         },