Updated demo, readme to include thumb preview example. Alternate defa…

…ult label based on multiple file support.

README.md

@@ -2,24 +2,25 @@ Bootstrap File Field
 ============================
 
 jQuery plugin to enhance file fields with modern features and bootstrap design.
-Smart file selection features (e,g, restricting size and file type, showing selected file list etc.)
-with generic form submission process, **no ajax upload**.
+Smart file selection features (e,g, showing thumbs, restricting size and file type etc.)
+while using generic form submission, **no ajax upload**.
 
 What it does?
 ------------------
 
 * Display file upload field like Bootstrap buttons
-* Can restrict file types, don't allow wrong file types
+* Can display preview thumbs of selected images
+* Can restrict file types - allow only configured mime types
 * Can set maximum and/or minimum file size limit 
-* Can set maximum and/or minimum total size limit (for multiple selection)
-* Can set maximum and/or minimum number of files can be selected (for multiple selection)
-* All restrictions are checked on client side using HTML5 File API
+* Can set maximum and/or minimum total size limit
+* Can set maximum and/or minimum number of files can be selected 
+* All restrictions are checked on client side using HTML5 File/FileList/FileReader APIs
 * Display user friendly errors if any restriction prevented file selection
-* Display name/list of selected files (if no error)  
+* Display name/list of selected files (if no error and preview is off)  
 
 Check [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/), it's usability + simplicity!
 
-![Screenshot](/demo/bootstrap_file_field.jpg "Bootstrap File Field Screenshot")
+![Screenshot](/demo/bootstrap-file-field-2.jpg "Bootstrap File Field Screenshot")
 
 Install
 ------------------
@@ -42,21 +43,35 @@ Remember to include jQuery js and Bootstrap css files before plugin files. Also,
 How to use
 ------------------
 
-**Initiate with data attribute, no customization**  
-`<input type="file" data-field-type="bootstrap-file-field" name="sample1">`
+**Initiating with data attribute, no customization**
+```
+<input type="file" data-field-type="bootstrap-file-filed" name="sample1">
+```
+
+**Showing image preview, setting custom label, class and file types. Allows multiple.**
+```
+<input type="file" name="sample3[]"    
+    data-field-type="bootstrap-file-filed"  
+    data-label="Select Image Files"  
+    data-btn-class="btn-primary"  
+    data-file-types="image/jpeg,image/png,image/gif"  
+    data-preview="on"  
+    multiple >
+```
 
-**Initiate with data attribute, with custom label, class and file types**  
+**Allow PDF files only. Preview off**
 ```
-<input type="file" name="sample2"
-       data-field-type="bootstrap-file-field"
-       data-label="Select Image Files"
-       data-btn-class="btn-primary"
-       data-file-types="image/jpeg,image/png">`
+<input type="file" name="sample4[]"  
+    data-field-type="bootstrap-file-filed"  
+    data-label="Select PDF Files"  
+    data-file-types="application/pdf"  
+    multiple >
 ```
 
-**Initiate with javascript by class/selector**  
+**Initiating with javascript by class/selector. Select at most 2 images below 80kb each**
+
 HTML :  
-`<input type="file" class="smart-file" name="sample3[]" multiple>`  
+`<input type="file" class="smart-file" name="sample3[]" multiple>`    
 JavaScript :  
 ```
 $('.smart-file').bootstrapFileField({   
@@ -65,19 +80,8 @@ $('.smart-file').bootstrapFileField({
     maxFileSize: 80000 // 80kb in bytes  
 });
 ```
-**Overwriting configuration using data attribute**
-
-Let's assume, this field has already been initiated with previous example (as it has class <code>smart-file</code>).
-Now we'll add and modify some of customization options using data attributes.
-
-```
-<input type="file" name="sample4[]" class="smart-file" multiple
-    data-label="Select PDF Documents"
-    data-btn-class="btn-primary"
-    data-file-types="application/pdf">
-```
 
-Check the `demo/index.html` file (in downloaded source) or [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/) to see all the above examples in action.
+Check the `demo/index.html` file (in downloaded source) or [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/) to see more examples in action (including all the above).
 
 Supported Restrictions
 -------------------------
@@ -102,14 +106,15 @@ or data attributes to configure your file field.
 
 | What to configure| JS Settings Option| Data attribute| Default|
 | --- | --- | --- | --- |
-| Button label | label | data-label | Select File|
+| Button label | label | data-label | Select File/Select Files |
 | Button class | btnClass | data-btn-class | btn-default |    
+| Preview thumb | preview | data-preview | off |    
 | Allowed file types  by [mime type](https://www.sitepoint.com/web-foundations/mime-types-complete-list/) (comma separated values) | fileTypes | data-file-types | *Ignored* |    
 | Maximum file size (in byte) | maxFileSize | data-max-file-size | *Ignored* |    
 | Minimum file size (in byte) | minFileSize | data-min-file-size | *Ignored* |    
 | Maximum total file size (M) | maxTotalSize | data-max-total-size | *Ignored* |    
 | Maximum number of files (M) | maxNumFiles | data-max-num-files | *Ignored* |    
 | Minimum number of files (M) | minNumFiles | data-min-num-files | *Ignored* |
-(M) = For multiple file selection only
+(M) = For multiple file selection 
 
 Inspired by: http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

demo/index.html

@@ -36,15 +36,16 @@ <h3 class="text-muted">Bootstrap File Filed</h3>
     </div>
 
     <div class="col-md-12">
-        <h3>Bootstrap File Field samples</h3>
+        <h3>Bootstrap File Field demo</h3>
 
         <p class="lead">
-            This page has examples of various ways of using and configuring this plugin.
+            Examples of using and configuring <i>Bootstrap File Field</i> in various ways.
         </p>
-        <p class="text-info"><strong>Note:</strong> On server end, you'll get the files as generic form submission process.</p>
+        <p class="text-info"><strong>Note:</strong> On server end, you'll receive the files with submitted form (with <code>enctype="multipart/form-data"</code>).
+            No ajax upload is being used.</p>
         <hr>
 
-        <form role="form" enctype="application/x-www-form-urlencoded">
+        <form role="form" enctype="multipart/form-data">
 
             <!--<div class="form-group">-->
                 <!--<label for="photo" class="col-sm-3 control-label">Upload photos</label>-->
@@ -56,30 +57,68 @@ <h3>Bootstrap File Field samples</h3>
                     <!--<ul class="list-unstyled fileList"></ul>-->
                 <!--</div>-->
             <!--</div>-->
+
             <div class="form-group">
-                <label for="sample1">Initiate with data attribute, no customization</label>
+                <label for="sample1">Example 1: Initiating with data attribute, no customization</label>
                     <p>
                         <code>&lt;input type="file" data-field-type="bootstrap-file-filed" name="sample1"&gt;</code>
                     </p>
                     <input type="file" data-field-type="bootstrap-file-filed" name="sample1">
             </div>
+
             <div class="form-group">
-                <label for="sample2">Initiate with data attribute, with image thumb, custom label, button class and file types.</label>
+                <label for="sample2">Example 2: Single Image file with preview.</label>
                 <p>
                     <code>&lt;input type="file" name="sample2" data-field-type="bootstrap-file-filed" <br />
+                        &nbsp;&nbsp;&nbsp;&nbsp;data-preview="on" <br />
+                        &nbsp;&nbsp;&nbsp;&nbsp;data-file-types="image/jpeg,image/png,image/gif"&gt;</code>
+                </p>
+                <input type="file" name="sample2"
+                       data-field-type="bootstrap-file-filed"
+                       data-file-types="image/jpeg,image/png,image/gif"
+                       data-preview="on">
+            </div>
+
+            <div class="form-group">
+                <label for="sample3">Example 3: Showing image preview, setting custom label, class and file types. Allows multiple.</label>
+                <p>
+                    <code>&lt;input type="file" name="sample3[]" data-field-type="bootstrap-file-filed" <br />
                         &nbsp;&nbsp;&nbsp;&nbsp;data-label="Select Image Files" <br />
                         &nbsp;&nbsp;&nbsp;&nbsp;data-btn-class="btn-primary" <br />
-                        &nbsp;&nbsp;&nbsp;&nbsp;data-file-types="image/jpeg,image/png"&gt;</code>
+                        &nbsp;&nbsp;&nbsp;&nbsp;data-file-types="image/jpeg,image/png,image/gif" <br />
+                        &nbsp;&nbsp;&nbsp;&nbsp;data-preview="on" <br />
+                        &nbsp;&nbsp;&nbsp;&nbsp;multiple &gt;
+                    </code>
                 </p>
-                <input type="file" name="sample2"
+                <input type="file" name="sample3[]"
                        data-field-type="bootstrap-file-filed"
                        data-label="Select Image Files"
                        data-btn-class="btn-primary"
-                       data-file-types="image/jpeg,image/png"
-                       data-preview="off">
+                       data-file-types="image/jpeg,image/png,image/gif"
+                       data-preview="on"
+                       multiple
+                >
             </div>
+
             <div class="form-group">
-                <label for="sample3">Initiate with javascript by class/selector.</label>
+                <label for="sample4">Example 4: Allow PDF files only. Preview off.</label>
+                <p>
+                    <code>&lt;input type="file" name="sample4[]" data-field-type="bootstrap-file-filed" <br />
+                        &nbsp;&nbsp;&nbsp;&nbsp;data-label="Select PDF Files" <br />
+                        &nbsp;&nbsp;&nbsp;&nbsp;data-file-types="application/pdf" <br />
+                        &nbsp;&nbsp;&nbsp;&nbsp;multiple &gt;
+                    </code>
+                </p>
+                <input type="file" name="sample4[]"
+                       data-field-type="bootstrap-file-filed"
+                       data-label="Select PDF Files"
+                       data-file-types="application/pdf"
+                       multiple
+                >
+            </div>
+
+            <div class="form-group">
+                <label for="sample5">Example 5: Initiating with javascript by class/selector. Select at most 2 images below 80kb each.</label>
 
                 <p>
                     HTML : <br />
@@ -97,20 +136,20 @@ <h3>Bootstrap File Field samples</h3>
                 <input type="file" name="sample3[]" class="smart-file" multiple>
             </div>
             <div class="form-group">
-                <label for="sample4">Overwriting initial (by javascript) configuration using data attribute</label>
+                <label for="sample6">Example 6: Overwriting initial (by javascript) configuration using data attribute</label>
                 <p>
-                    This field has already been initiated with previous field (as it has class <code>smart-file</code>).
+                    This field has already been initiated with previous example (as it has class <code>smart-file</code>).
                     Now we'll add and modify some of customization options using data attributes.
                 </p>
                 <p>
                     <code>
-                        &lt;input type="file" name="sample4[]" class="smart-file" multiple <br />
+                        &lt;input type="file" name="sample6[]" class="smart-file" multiple <br />
                         &nbsp;&nbsp;&nbsp;&nbsp;data-label="Select PDF Documents" <br />
                         &nbsp;&nbsp;&nbsp;&nbsp;data-btn-class="btn-primary" <br />
                         &nbsp;&nbsp;&nbsp;&nbsp;data-file-types="application/pdf"&gt;
                     </code>
                 </p>
-                <input type="file" name="sample4[]" class="smart-file" multiple
+                <input type="file" name="sample6[]" class="smart-file" multiple
                        data-label="Select PDF Documents"
                        data-btn-class="btn-primary"
                        data-file-types="application/pdf">
@@ -142,15 +181,18 @@ <h4>Configuration Options</h4>
             <table class="table table-bordered">
                 <tr>
                     <th>What to configure</th>
-                    <th>JS Settings Option</th>
+                    <th>JS Settings key</th>
                     <th>Data attribute</th>
                     <th>Default</th>
                 </tr>
                 <tr>
                     <td>Button label</td>
                     <td>label</td>
                     <td>data-label</td>
-                    <td>Select File</td>
+                    <td>
+                        Select File <br />
+                        Select Files <sup>M</sup>
+                    </td>
                 </tr>
                 <tr>
                     <td>Button class</td>
@@ -167,6 +209,12 @@ <h4>Configuration Options</h4>
                     <td>data-file-types</td>
                     <td><em>Ignored</em></td>
                 </tr>
+                <tr>
+                    <td>Preview thumb</td>
+                    <td>preview</td>
+                    <td>data-preview</td>
+                    <td>off</td>
+                </tr>
                 <tr>
                     <td>Maximum file size (in byte)</td>
                     <td>maxFileSize</td>
@@ -198,7 +246,7 @@ <h4>Configuration Options</h4>
                     <td><em>Ignored</em></td>
                 </tr>
             </table>
-            <p><sup>M</sup> = For multiple file selection only</p>
+            <p><sup>M</sup> = For multiple file <selection></selection></p>
         </div>
     </div>
 

src/css/bootstrap_file_field.css

@@ -1,4 +1,4 @@
-/*! BootstrapFileField v1.0.0 | (c) ajaxray.com | MIT License
+/*! BootstrapFileField v1.2.0 | (c) ajaxray.com | MIT License
  * https://github.com/ajaxray/bootstrap-file-field
  **/
 
@@ -31,6 +31,10 @@ ul.fileList.thumbs li {
     position: relative;
     margin: 10px 10px 10px 0;
 }
+ul.fileList.thumbs li img {
+    height: 100px;
+}
+
 ul.fileList.thumbs li img.icon {
     background-color: #ddd;
 }

src/js/bootstrap_file_field.js

@@ -1,4 +1,4 @@
-/*! BootstrapFileField v1.0.0 | (c) ajaxray.com | MIT License
+/*! BootstrapFileField v1.2.0 | (c) ajaxray.com | MIT License
  * https://github.com/ajaxray/bootstrap-file-field
  **/
 (function( $ ) {
@@ -9,7 +9,7 @@
             // Presentation
             label: "Select File",
             btnClass: 'btn-default',
-            preview: 'on',
+            preview: 'off',
 
             // Restrictions
             fileTypes: false,
@@ -31,13 +31,12 @@
 
                 reader.addEventListener("load", function () {
                     var image = new Image();
-                    image.height = 100;
                     image.title = file.name;
 
                     if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
                         image.src = this.result;
                     } else {
-                        image.className = 'icon';
+                        image.className += 'icon';
                         image.src = 'data:image/png;base64,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';
                     }
                     callback(image);
@@ -75,10 +74,14 @@
         };
 
         this.filter( ":file" ).each(function() {
-            var btnClass     = $(this).data('btn-class') ||settings.btnClass;
+            var btnClass     = $(this).data('btn-class') || settings.btnClass;
             var label        = $(this).data('label') || settings.label;
             var preview      = $(this).data('preview') || settings.preview;
 
+            if (label == settings.label && $(this).attr('multiple')) {
+                label += 's';
+            }
+
             // Restrictions
             var fileTypes    = $(this).data('file-types') || settings.fileTypes;
             var maxFileSize  = $(this).data('max-file-size') || settings.maxFileSize;