Fix #809: Various enhancements for preview control and iconic thumbnails

CHANGE.md

@@ -3,7 +3,7 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.3.6
 
-**Date:** 15-Nov-2016
+**Date:** 17-Dec-2016
 
 1. (enh #696): Better default preview zoom settings.
 2. (enh #764): Update Russian Translations.
@@ -24,6 +24,11 @@ Change Log: `bootstrap-fileinput`
 11. (enh #802): Allow MOV files preview for supported devices and browsers.
 12. (enh #803): Update Hungarian Translations.
 13. (enh #804): Add Slovenian Translations.
+14. (enh #809): Various enhancements for preview control and iconic thumbnails.
+    - add ability to control and render different previews for file thumbnails and zoomed preview content
+    - new property `preferIconicPreview` will try to parse the `previewFileIconSettings` and `previewFileExtSettings` to automatically force iconic previews for file thumbnails.
+    - new property `preferIconicZoomPreview` will try to parse the `previewFileIconSettings` and `previewFileExtSettings` to automatically force iconic previews in the zoomed content.
+    - the above properties will be applied and parsed for `initialPreview` content as well.
 
 ## version 4.3.5
 

js/fileinput.js

@@ -30,7 +30,7 @@
     $.fn.fileinputLocales = {};
     $.fn.fileinputThemes = {};
 
-    var NAMESPACE, MODAL_ID, STYLE_SETTING, OBJECT_PARAMS, DEFAULT_PREVIEW, objUrl, compare, isIE, handler,
+    var NAMESPACE, MODAL_ID, FRAMES, STYLE_SETTING, OBJECT_PARAMS, DEFAULT_PREVIEW, objUrl, compare, isIE, handler,
         previewCache, getNum, hasFileAPISupport, hasDragDropSupport, hasFileUploadSupport, addCss, tMain1, tMain2,
         tPreview, tFileIcon, tClose, tCaption, tBtnDefault, tBtnLink, tBtnBrowse, tModalMain, tModal, tProgress, tSize,
         tFooter, tActions, tActionDelete, tActionUpload, tActionZoom, tActionDrag, tTagBef, tTagBef1, tTagBef2, tTagAft,
@@ -41,6 +41,7 @@
 
     NAMESPACE = '.fileinput';
     MODAL_ID = 'kvFileinputModal';
+    FRAMES = '.file-preview-frame:visible';
     STYLE_SETTING = 'style="width:{width};height:{height};"';
     OBJECT_PARAMS = '<param name="controller" value="true" />\n' +
         '<param name="allowFullScreen" value="true" />\n' +
@@ -95,9 +96,9 @@
                 getSize: function (size) {
                     return obj._getSize(size);
                 },
-                parseTemplate: function (cat, data, fname, ftype, pId, ftr, ind) {
+                parseTemplate: function (cat, data, fname, ftype, pId, ftr, ind, tmpl) {
                     var fc = ' file-preview-initial';
-                    return obj._generatePreviewTemplate(cat, data, fname, ftype, pId, false, null, fc, ftr, ind);
+                    return obj._generatePreviewTemplate(cat, data, fname, ftype, pId, false, null, fc, ftr, ind, tmpl);
                 },
                 msg: function (n) {
                     return obj._getMsgSelected(n);
@@ -122,8 +123,8 @@
         },
         get: function (id, i, isDisabled) {
             var ind = 'init_' + i, data = previewCache.data[id], config = data.config[i], content = data.content[i],
-                previewId = data.initId + '-' + ind, out, $tmp, frameClass = ' file-preview-initial', cat, cap, ftr,
-                ftype, asData = ifSet('previewAsData', config, data.previewAsData);
+                previewId = data.initId + '-' + ind, out, $tmp, cat, ftr, fname, ftype,
+                asData = ifSet('previewAsData', config, data.previewAsData);
             isDisabled = isDisabled === undefined ? true : isDisabled;
             /** @namespace config.frameAttr */
             /** @namespace config.frameClass */
@@ -131,21 +132,15 @@
             if (!content) {
                 return '';
             }
-            if (config && config.frameClass) {
-                frameClass += ' ' + config.frameClass;
-            }
+            cat = ifSet('type', config, data.previewFileType || 'generic');
+            fname = ifSet('filename', config, ifSet('caption', config));
+            ftype = ifSet('filetype', config, cat);
+            ftr = previewCache.footer(id, i, isDisabled, (config && config.size || null));
             if (asData) {
-                cat = data.previewAsData ? ifSet('type', config, data.previewFileType || 'generic') : 'generic';
-                cap = ifSet('caption', config);
-                ftr = previewCache.footer(id, i, isDisabled, (config && config.size || null));
-                ftype = ifSet('filetype', config, cat);
-                out = data.parseTemplate(cat, content, cap, ftype, previewId, ftr, ind, null);
+                out = data.parseTemplate(cat, content, fname, ftype, previewId, ftr, ind);
             } else {
-                out = data.template
-                    .replace(/\{previewId}/g, previewId).replace(/\{frameClass}/g, frameClass)
-                    .replace(/\{fileindex}/g, ind).replace(/\{content}/g, data.content[i])
-                    .replace(/\{template}/g, ifSet('type', config, data.previewFileType))
-                    .replace(/\{footer}/g, previewCache.footer(id, i, isDisabled, (config && config.size || null)));
+                out = data.parseTemplate('generic', content, fname, ftype, previewId, ftr, ind, cat)
+                    .replace(/\{content}/g, data.content[i]);
             }
             if (data.tags.length && data.tags[i]) {
                 out = replaceTags(out, data.tags[i]);
@@ -255,7 +250,7 @@
         footer: function (id, i, isDisabled, size) {
             var data = previewCache.data[id];
             isDisabled = isDisabled === undefined ? true : isDisabled;
-            if (data.config.length === 0 || isEmpty(data.config[i])) {
+            if (!data || !data.config || data.config.length === 0 || isEmpty(data.config[i])) {
                 return '';
             }
             var config = data.config[i], caption = ifSet('caption', config), width = ifSet('width', config, 'auto'),
@@ -460,7 +455,7 @@
         other: {width: "160px", height: "160px"}
     };
     defaultPreviewZoomSettings = {
-        image: {width: "auto", height: "auto", 'max-width': "100%",'max-height': "100%"},
+        image: {width: "auto", height: "auto", 'max-width': "100%", 'max-height': "100%"},
         html: {width: "100%", height: "100%", 'min-height': "480px"},
         text: {width: "100%", height: "100%", 'min-height': "480px"},
         video: {width: "auto", height: "100%", 'max-width': "100%"},
@@ -556,34 +551,30 @@
             document.msFullscreenElement;
     };
     toggleFullScreen = function (maximize) {
-        if (maximize && !checkFullScreen()) {
-            /** @namespace document.documentElement.requestFullscreen */
-            /** @namespace document.documentElement.msRequestFullscreen */
-            /** @namespace document.documentElement.mozRequestFullScreen */
-            /** @namespace document.documentElement.webkitRequestFullscreen */
-            /** @namespace Element.ALLOW_KEYBOARD_INPUT */
-            if (document.documentElement.requestFullscreen) {
-                document.documentElement.requestFullscreen();
-            } else if (document.documentElement.msRequestFullscreen) {
-                document.documentElement.msRequestFullscreen();
-            } else if (document.documentElement.mozRequestFullScreen) {
-                document.documentElement.mozRequestFullScreen();
-            } else if (document.documentElement.webkitRequestFullscreen) {
-                document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        var doc = document, de = doc.documentElement;
+        if (de && maximize && !checkFullScreen()) {
+            if (de.requestFullscreen) {
+                de.requestFullscreen();
+            } else if (de.msRequestFullscreen) {
+                de.msRequestFullscreen();
+            } else if (de.mozRequestFullScreen) {
+                de.mozRequestFullScreen();
+            } else if (de.webkitRequestFullscreen) {
+                de.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
             }
         } else {
             /** @namespace document.exitFullscreen */
             /** @namespace document.msExitFullscreen */
             /** @namespace document.mozCancelFullScreen */
             /** @namespace document.webkitExitFullscreen */
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
+            if (doc.exitFullscreen) {
+                doc.exitFullscreen();
+            } else if (doc.msExitFullscreen) {
+                doc.msExitFullscreen();
+            } else if (doc.mozCancelFullScreen) {
+                doc.mozCancelFullScreen();
+            } else if (doc.webkitExitFullscreen) {
+                doc.webkitExitFullscreen();
             }
         }
     };
@@ -701,17 +692,23 @@
             }
             self._initZoom();
         },
+        _log: function (msg) {
+            var self = this, id = self.$element.attr('id');
+            if (id) {
+                msg = '"' + id + '": ' + msg;
+            }
+            if (typeof window.console.log !== "undefined") {
+                window.console.log(msg);
+            } else {
+                window.alert(msg);
+            }
+        },
         _validate: function () {
-            var self = this, $exception;
-            if (self.$element.attr('type') === 'file') {
-                return true;
+            var self = this, status = self.$element.attr('type') === 'file';
+            if (!status) {
+                self._log('The input "type" must be set to "file" for initializing the "bootstrap-fileinput" plugin.');
             }
-            $exception = '<div class="help-block alert alert-warning">' +
-                '<h4>Invalid Input Type</h4>' +
-                'You must set an input <code>type = file</code> for <b>bootstrap-fileinput</b> plugin to initialize.' +
-                '</div>';
-            self.$element.after($exception);
-            return false;
+            return status;
         },
         _errorsExist: function () {
             var self = this, $err;
@@ -843,25 +840,29 @@
             }
             return 'other';
         },
-        _parseFilePreviewIcon: function (content, fname) {
-            var self = this, proceed, ext, icn = self.previewFileIcon;
+        _getPreviewIcon: function (fname) {
+            var self = this, ext, out = null;
             if (fname && fname.indexOf('.') > -1) {
                 ext = fname.split('.').pop();
                 if (self.previewFileIconSettings && self.previewFileIconSettings[ext]) {
-                    icn = self.previewFileIconSettings[ext];
+                    out = self.previewFileIconSettings[ext];
                 }
                 if (self.previewFileExtSettings) {
                     $.each(self.previewFileExtSettings, function (key, func) {
                         if (self.previewFileIconSettings[key] && func(ext)) {
-                            icn = self.previewFileIconSettings[key];
+                            out = self.previewFileIconSettings[key];
+                            //noinspection UnnecessaryReturnStatementJS
                             return;
                         }
-                        proceed = true;
                     });
                 }
             }
+            return out;
+        },
+        _parseFilePreviewIcon: function (content, fname) {
+            var self = this, icn = self._getPreviewIcon(fname) || self.previewFileIcon;
             if (content.indexOf('{previewFileIcon}') > -1) {
-                return content.replace(/\{previewFileIconClass}/g, self.previewFileIconClass).replace(
+                content = content.replace(/\{previewFileIconClass}/g, self.previewFileIconClass).replace(
                     /\{previewFileIcon}/g, icn);
             }
             return content;
@@ -1041,10 +1042,10 @@
             return !self._abort({});
         },
         _clearPreview: function () {
-            var self = this, $thumbs = !self.showUploadedThumbs ? self.$preview.find('.file-preview-frame') :
-                self.$preview.find('.file-preview-frame:not(.file-preview-success)');
+            var self = this, $thumbs = !self.showUploadedThumbs ? self.$preview.find(FRAMES) :
+                self.$preview.find(FRAMES + ':not(.file-preview-success)');
             $thumbs.remove();
-            if (!self.$preview.find('.file-preview-frame').length || !self.showPreview) {
+            if (!self.$preview.find(FRAMES).length || !self.showPreview) {
                 self._resetUpload();
             }
             self._validateDefaultPreview();
@@ -1061,17 +1062,15 @@
                 dataIdAttr: 'data-preview-id',
                 draggable: '.file-preview-initial',
                 onSort: function (e) {
-                    var oldIndex = e.oldIndex, newIndex = e.newIndex;
+                    var oldIndex = e.oldIndex, newIndex = e.newIndex, key, $frame;
                     self.initialPreview = moveArray(self.initialPreview, oldIndex, newIndex);
                     self.initialPreviewConfig = moveArray(self.initialPreviewConfig, oldIndex, newIndex);
                     previewCache.init(self);
-                    for(var i = 0; i < self.initialPreviewConfig.length; i++) {
-                        if(self.initialPreviewConfig[i] !== null) {
-                            var key = self.initialPreviewConfig[i].key;
-                            var $frame = $(".kv-file-remove[data-key='" + key + "']");
-                            $frame = $frame.closest('.file-preview-frame');
-                            $frame.attr('data-fileindex', 'init_'+i);
-                            $frame.data('fileindex', 'init_'+i);
+                    for (var i = 0; i < self.initialPreviewConfig.length; i++) {
+                        if (self.initialPreviewConfig[i] !== null) {
+                            key = self.initialPreviewConfig[i].key;
+                            $frame = $(".kv-file-remove[data-key='" + key + "']").closest(FRAMES);
+                            $frame.attr('data-fileindex', 'init_' + i).data('fileindex', 'init_' + i);
                         }
                     }
                     self._raise('filesorted', {
@@ -1170,14 +1169,14 @@
         },
         _initZoomButtons: function () {
             var self = this, previewId = self.$modal.data('previewId') || '', $first, $last,
-                frames = self.$preview.find('.file-preview-frame').toArray(), len = frames.length,
+                thumbs = self.$preview.find(FRAMES).toArray(), len = thumbs.length,
                 $prev = self.$modal.find('.btn-prev'), $next = self.$modal.find('.btn-next');
 
             if (!len) {
                 return;
             }
-            $first = $(frames[0]);
-            $last = $(frames[len - 1]);
+            $first = $(thumbs[0]);
+            $last = $(thumbs[len - 1]);
             $prev.removeAttr('disabled');
             $next.removeAttr('disabled');
             if ($first.length && $first.attr('id') === previewId) {
@@ -1238,11 +1237,12 @@
             var self = this, $content, tmplt, body, title, $body, $dataEl, config, previewId = $preview.attr('id'),
                 $modal = self.$modal, $prev = $modal.find('.btn-prev'), $next = $modal.find('.btn-next'), $tmp,
                 $btnFull = $modal.find('.btn-fullscreen'), $btnBord = $modal.find('.btn-borderless'),
-                $btnTogh = $modal.find('.btn-toggleheader');
-            tmplt = $preview.data('template') || 'generic';
-            $content = $preview.find('.kv-file-content');
+                $btnTogh = $modal.find('.btn-toggleheader'),
+                $zoomPreview = $preview.parent().find('.kv-zoom-cache #zoom-' + previewId);
+            tmplt = $zoomPreview.data('template') || 'generic';
+            $content = $zoomPreview.find('.kv-file-content');
             body = $content.length ? $content.html() : '';
-            title = $preview.find('.file-footer-caption').text() || '';
+            title = $zoomPreview.find('.file-footer-caption').text() || '';
             $modal.find('.kv-zoom-title').html(title);
             $body = $modal.find('.kv-zoom-body');
             if (animate) {
@@ -1321,27 +1321,27 @@
                 throw 'Cannot zoom to detailed preview!';
             }
             self.$modal.html(self._getModalContent());
-            $preview = $btn.closest('.file-preview-frame');
+            $preview = $btn.closest(FRAMES);
             self._setZoomContent($preview);
             self.$modal.modal('show');
             self._initZoomButtons();
         },
         _zoomSlideShow: function (dir, previewId) {
             var self = this, $btn = self.$modal.find('.kv-zoom-actions .btn-' + dir), $targFrame, i,
-                frames = self.$preview.find('.file-preview-frame').toArray(), len = frames.length, out;
+                thumbs = self.$preview.find(FRAMES).toArray(), len = thumbs.length, out;
             if ($btn.attr('disabled')) {
                 return;
             }
             for (i = 0; i < len; i++) {
-                if ($(frames[i]).attr('id') === previewId) {
+                if ($(thumbs[i]).attr('id') === previewId) {
                     out = dir === 'prev' ? i - 1 : i + 1;
                     break;
                 }
             }
-            if (out < 0 || out >= len || !frames[out]) {
+            if (out < 0 || out >= len || !thumbs[out]) {
                 return;
             }
-            $targFrame = $(frames[out]);
+            $targFrame = $(thumbs[out]);
             if ($targFrame.length) {
                 self._setZoomContent($targFrame, true);
             }
@@ -1361,18 +1361,18 @@
             var self = this, deleteExtraData = self.deleteExtraData || {},
                 resetProgress = function () {
                     var hasFiles = self.isUploadable ? previewCache.count(self.id) : self.$element.get(0).files.length;
-                    if (self.$preview.find('.kv-file-remove').length === 0 && !hasFiles) {
+                    if (self.$preview.find('.kv-file-remove:visible').length === 0 && !hasFiles) {
                         self.reset();
                         self.initialCaption = '';
                     }
                 };
             self._initZoomButton();
-            self.$preview.find('.kv-file-remove').each(function () {
+            self.$preview.find('.kv-file-remove:visible').each(function () {
                 var $el = $(this), vUrl = $el.data('url') || self.deleteUrl, vKey = $el.data('key');
                 if (isEmpty(vUrl) || vKey === undefined) {
                     return;
                 }
-                var $frame = $el.closest('.file-preview-frame'), cache = previewCache.data[self.id],
+                var $frame = $el.closest(FRAMES), cache = previewCache.data[self.id],
                     settings, params, index = $frame.data('fileindex'), config, extraData;
                 index = parseInt(index.replace('init_', ''));
                 config = isEmpty(cache.config) && isEmpty(cache.config[index]) ? null : cache.config[index];
@@ -1417,6 +1417,10 @@
                         }
                         $frame.removeClass('file-uploading').addClass('file-deleted');
                         $frame.fadeOut('slow', function () {
+                            var $cache = $frame.parent().find('.kv-zoom-cache #zoom-' + $frame.attr('id'));
+                            if ($cache.length) {
+                                $cache.parent().remove();
+                            }
                             self._clearObjects($frame);
                             $frame.remove();
                             resetProgress();
@@ -1587,7 +1591,7 @@
         },
         _getThumbs: function (css) {
             css = css || '';
-            return this.$preview.find('.file-preview-frame:not(.file-preview-initial)' + css);
+            return this.$preview.find(FRAMES + ':not(.file-preview-initial)' + css);
         },
         _getExtraData: function (previewId, index) {
             var self = this, data = self.uploadExtraData;
@@ -1693,18 +1697,22 @@
             if (!self.showPreview) {
                 return;
             }
-            self._getThumbs('.file-preview-success').each(function () {
+            self._getThumbs('.file-preview-success:visible').each(function () {
                 var $thumb = $(this), $remove = $thumb.find('.kv-file-remove');
                 $remove.removeAttr('disabled');
                 handler($remove, 'click', function () {
-                    var out = self._raise('filesuccessremove', [$thumb.attr('id'), $thumb.data('fileindex')]);
+                    var id = $thumb.attr('id'), out = self._raise('filesuccessremove', [id, $thumb.data('fileindex')]);
                     cleanMemory($thumb);
                     if (out === false) {
                         return;
                     }
                     $thumb.fadeOut('slow', function () {
+                        var $cache = $thumb.parent().find('.kv-zoom-cache #zoom-' + id);
+                        if ($cache.length) {
+                            $cache.parent().remove();
+                        }
                         $thumb.remove();
-                        if (!self.$preview.find('.file-preview-frame').length) {
+                        if (!self.$preview.find(FRAMES).length) {
                             self.reset();
                         }
                     });
@@ -2015,9 +2023,9 @@
                 return;
             }
             self._initZoomButton();
-            self.$preview.find('.kv-file-remove').each(function () {
-                var $el = $(this), $frame = $el.closest('.file-preview-frame'), hasError,
-                    id = $frame.attr('id'), ind = $frame.attr('data-fileindex'), n, cap, status;
+            self.$preview.find('.kv-file-remove:visible').each(function () {
+                var $el = $(this), $frame = $el.closest(FRAMES), hasError, id = $frame.attr('id'),
+                    ind = $frame.attr('data-fileindex'), n, cap, status;
                 handler($el, 'click', function () {
                     status = self._raise('filepreremove', [id, ind]);
                     if (status === false || !self._validateMinCount()) {
@@ -2026,6 +2034,10 @@
                     hasError = $frame.hasClass('file-preview-error');
                     cleanMemory($frame);
                     $frame.fadeOut('slow', function () {
+                        var $cache = $frame.parent().find('.kv-zoom-cache #zoom-' + id);
+                        if ($cache.length) {
+                            $cache.parent().remove();
+                        }
                         self.updateStack(ind, undefined);
                         self._clearObjects($frame);
                         $frame.remove();
@@ -2040,7 +2052,7 @@
                         self._clearFileInput();
                         var filestack = self.getFileStack(true), chk = previewCache.count(self.id),
                             len = filestack.length,
-                            hasThumb = self.showPreview && self.$preview.find('.file-preview-frame').length;
+                            hasThumb = self.showPreview && self.$preview.find(FRAMES).length;
                         if (len === 0 && chk === 0 && !hasThumb) {
                             self.reset();
                         } else {
@@ -2052,11 +2064,10 @@
                     });
                 });
             });
-            self.$preview.find('.kv-file-upload').each(function () {
+            self.$preview.find('.kv-file-upload:visible').each(function () {
                 var $el = $(this);
                 handler($el, 'click', function () {
-                    var $frame = $el.closest('.file-preview-frame'),
-                        ind = $frame.attr('data-fileindex');
+                    var $frame = $el.closest(FRAMES), ind = $frame.attr('data-fileindex');
                     if (!$frame.hasClass('file-preview-error')) {
                         self._uploadSingle(ind, self.filestack, false);
                     }
@@ -2076,7 +2087,7 @@
             if (!bytes || !size || isNaN(bytes) || isNaN(size)) {
                 return self._getLayoutTemplate('size').replace('{sizeText}', '0.00 KB');
             }
-            var  i, func = self.fileSizeGetter, sizes, out;
+            var i, func = self.fileSizeGetter, sizes, out;
             if (typeof func === 'function') {
                 out = func(bytes);
             } else {
@@ -2086,26 +2097,31 @@
             }
             return self._getLayoutTemplate('size').replace('{sizeText}', out);
         },
-        _generatePreviewTemplate: function (cat, data, fname, ftype, previewId, isError, size, frameClass, foot, ind) {
-            var self = this, tmplt = self._getPreviewTemplate(cat), content, sText, css = frameClass || '',
-                config = ifSet(cat, self.previewSettings, defaultPreviewSettings[cat]), caption = self.slug(fname),
-                footer = foot || self._renderFileFooter(caption, size, config.width, isError);
+        _generatePreviewTemplate: function (cat, data, fname, ftype, previewId, isError, size, frameClass, foot, ind, templ) {
+            var self = this, css = frameClass || '', caption = self.slug(fname),
+                config = ifSet(cat, self.previewSettings, defaultPreviewSettings[cat]), prevContent, zoomContent = '',
+                footer = foot || self._renderFileFooter(caption, size, config.width, isError),
+                hasIconSetting = self._getPreviewIcon(fname),
+                forcePrevIcon = hasIconSetting && self.preferIconicPreview,
+                forceZoomIcon = hasIconSetting && self.preferIconicZoomPreview,
+                getContent = function (c, d, zoom) {
+                    var id = zoom ? 'zoom-' + previewId : previewId, tmplt = self._getPreviewTemplate(c);
+                    tmplt = self._parseFilePreviewIcon(tmplt, fname);
+                    if (c === 'text') {
+                        d = htmlEncode(d);
+                    }
+                    return tmplt.replace(/\{previewId}/g, id).replace(/\{caption}/g, caption)
+                        .replace(/\{frameClass}/g, css).replace(/\{type}/g, ftype).replace(/\{fileindex}/g, ind)
+                        .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height)
+                        .replace(/\{footer}/g, footer).replace(/\{data}/g, d).replace(/\{template}/g, templ || cat);
+                };
             ind = ind || previewId.slice(previewId.lastIndexOf('-') + 1);
-            tmplt = self._parseFilePreviewIcon(tmplt, fname);
-            if (cat === 'text' || cat === 'html') {
-                sText = cat === 'text' ? htmlEncode(data) : data;
-                content = tmplt.replace(/\{previewId}/g, previewId).replace(/\{caption}/g, caption)
-                    .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height)
-                    .replace(/\{frameClass}/g, css).replace(/\{cat}/g, ftype)
-                    .replace(/\{footer}/g, footer).replace(/\{fileindex}/g, ind)
-                    .replace(/\{data}/g, sText).replace(/\{template}/g, cat);
-            } else {
-                content = tmplt.replace(/\{previewId}/g, previewId).replace(/\{caption}/g, caption)
-                    .replace(/\{frameClass}/g, css).replace(/\{type}/g, ftype).replace(/\{fileindex}/g, ind)
-                    .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height)
-                    .replace(/\{footer}/g, footer).replace(/\{data}/g, data).replace(/\{template}/g, cat);
+            if (self.fileActionSettings.showZoom) {
+                zoomContent = getContent((forceZoomIcon ? 'other' : cat), data, true);
             }
-            return content;
+            zoomContent = '\n<div class="kv-zoom-cache" style="display:none">\n' + zoomContent + '\n</div>\n';
+            prevContent = getContent((forcePrevIcon ? 'other' : cat), data);
+            return prevContent + zoomContent;
         },
         _previewDefault: function (file, previewId, isDisabled) {
             var self = this, $preview = self.$preview, $previewLive = $preview.find('.file-live-thumbs');
@@ -2401,7 +2417,7 @@
             if (!self.isUploadable || !self.showPreview || $zone.length === 0 || self.getFileStack().length > 0 || !self.dropZoneEnabled) {
                 return;
             }
-            if ($zone.find('.file-preview-frame').length === 0 && isEmpty(self.defaultPreviewContent)) {
+            if ($zone.find(FRAMES).length === 0 && isEmpty(self.defaultPreviewContent)) {
                 $zone.prepend('<div class="' + self.dropZoneTitleClass + '">' + title + '</div>');
             }
             self.$container.removeClass('file-input-new');
@@ -3005,7 +3021,7 @@
                 addCss(self.$container, 'file-input-new');
                 self._validateDefaultPreview();
             }
-            if (self.$container.find('.file-preview-frame').length === 0) {
+            if (self.$container.find(FRAMES).length === 0) {
                 if (!self._initCaption()) {
                     self.$captionContainer.find('.kv-caption-icon').hide();
                 }
@@ -3022,7 +3038,7 @@
             self.$container.find('.fileinput-filename').text('');
             self._raise('filereset');
             addCss(self.$container, 'file-input-new');
-            if (self.$preview.find('.file-preview-frame').length || self.isUploadable && self.dropZoneEnabled) {
+            if (self.$preview.find(FRAMES).length || self.isUploadable && self.dropZoneEnabled) {
                 self.$container.removeClass('file-input-new');
             }
             self._setFileDropZoneTitle();
@@ -3203,6 +3219,8 @@
             borderless: 'btn btn-default',
             close: 'btn btn-default'
         },
+        preferIconicPreview: false,
+        preferIconicZoomPreview: false,
         allowedPreviewTypes: defaultPreviewTypes,
         allowedPreviewMimeTypes: null,
         allowedFileTypes: null,