Added thumbnail preview of selected file.

ajaxray · Jun 11, 2016 · 09963eb · 09963eb
1 parent 7566cd3
commit 09963eb
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -112,7 +112,4 @@ or data attributes to configure your file field.
 | Minimum number of files (M) | minNumFiles | data-min-num-files | *Ignored* |
 (M) = For multiple file selection only
 
-Also you can activate plugin on a file field by adding attribute 
-`data-field-type="bootstrap-file-field"` 
-
 Inspired by: http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
diff --git a/demo/index.html b/demo/index.html
@@ -64,7 +64,7 @@ <h3>Bootstrap File Field samples</h3>
                     <input type="file" data-field-type="bootstrap-file-filed" name="sample1">
             </div>
             <div class="form-group">
-                <label for="sample2">Initiate with data attribute, with custom label, class and file types.</label>
+                <label for="sample2">Initiate with data attribute, with image thumb, custom label, button class and file types.</label>
                 <p>
                     <code>&lt;input type="file" name="sample2" data-field-type="bootstrap-file-filed" <br />
                         &nbsp;&nbsp;&nbsp;&nbsp;data-label="Select Image Files" <br />
@@ -75,7 +75,8 @@ <h3>Bootstrap File Field samples</h3>
                        data-field-type="bootstrap-file-filed"
                        data-label="Select Image Files"
                        data-btn-class="btn-primary"
-                       data-file-types="image/jpeg,image/png">
+                       data-file-types="image/jpeg,image/png"
+                       data-preview="off">
             </div>
             <div class="form-group">
                 <label for="sample3">Initiate with javascript by class/selector.</label>

diff --git a/src/css/bootstrap_file_field.css b/src/css/bootstrap_file_field.css
@@ -20,4 +20,33 @@
     background: white;
     cursor: inherit;
     display: block;
+}
+
+ul.fileList.thumbs {
+    clear: both;
+    overflow: auto;
+}
+ul.fileList.thumbs li {
+    float: left;
+    position: relative;
+    margin: 10px 10px 10px 0;
+}
+ul.fileList.thumbs li img.icon {
+    background-color: #ddd;
+}
+
+ul.fileList.thumbs li span.file-name {
+    position: absolute;
+    display: inline-block;
+    left: 22px;
+    top: 22px;
+    width: 56px;
+    overflow-wrap: break-word;
+    height: 60px;
+    font-size: 9px;
+    color: #666;
+}
+
+ul.fileList.thumbs li img:not(.icon)+span.file-name {
+    display: none;
 }
diff --git a/src/js/bootstrap_file_field.js b/src/js/bootstrap_file_field.js
@@ -9,6 +9,7 @@
             // Presentation
             label: "Select File",
             btnClass: 'btn-default',
+            preview: 'on',
 
             // Restrictions
             fileTypes: false,
@@ -24,12 +25,46 @@
             return false;
         };
 
+        var withPreviewThumb = function(file, callback) {
+
+                var reader = new FileReader();
+
+                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.src = 'data:image/png;base64,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';
+                    }
+                    callback(image);
+                }, false);
+
+                reader.readAsDataURL(file);
+        };
+
         var fileSelectHandler = function(event, files, fileNameList) {
             fileNameList.empty();
+            var preview = fileNameList.hasClass('thumbs');
 
             for (var i in files) {
                 if (files.hasOwnProperty(i) && $.isNumeric(i)) {
-                    fileNameList.append('<li class="text-success">&check; ' + files[i].name + '</li>');
+
+                    var name = files[i].name;
+                    if(preview) {
+                        withPreviewThumb(files[i], function (image) {
+                            $(image).addClass('img-rounded');
+                            $('<li></li>')
+                                .append(image)
+                                .append('<span class="file-name">'+ name +'</span>')
+                                .appendTo(fileNameList);
+                        });
+                    } else {
+                        fileNameList.append('<li class="text-success">&check; ' + name + '</li>');
+                    }
                 }
             }
         };
@@ -42,6 +77,7 @@
         this.filter( ":file" ).each(function() {
             var btnClass     = $(this).data('btn-class') ||settings.btnClass;
             var label        = $(this).data('label') || settings.label;
+            var preview      = $(this).data('preview') || settings.preview;
 
             // Restrictions
             var fileTypes    = $(this).data('file-types') || settings.fileTypes;
@@ -56,6 +92,9 @@
                 .insertBefore(this);
             var fileList = $('<ul class="list-unstyled small fileList"></ul>')
                 .insertAfter(button);
+            if('on' == preview) {
+                fileList.addClass('thumbs');
+            }
 
             $(button).append(label);
             $(button).append(this);