Updates to release v4.2.7 - fixes #436 and fixes #437

CHANGE.md

@@ -3,7 +3,7 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.2.7
 
-**Date**: 04-Sep-2015
+**Date**: 08-Sep-2015
 
 1. (bug #420): Revamp file status progress and positioning updates for asynchronous upload.
 2. (enh #427): Add image resizing capability before upload.
@@ -17,6 +17,9 @@ Change Log: `bootstrap-fileinput`
     - `fileimageresized` (fires after each image in preview is resized)
     - `fileimagesresized` (fires after all images in preview are resized)
     - `fileimageresizeerror` (fires when any image resize error is faced)
+8. (enh #434): Added Japanese translations.
+9. (enh #436): New property `showClose` and new layout template `close` to control close icon display.
+10. (enh #437): New property `defaultPreviewContent` to control a default preview.
 
 ## version 4.2.6
 

README.md

@@ -397,6 +397,7 @@ _object_ the templates configuration for rendering each part of the layout. You
 The `main1` and `main2` templates would automatically parse the following tags for replacement:
 
 - `{class}`: the CSS class as set in the `mainClass` property.
+- `{close}`: will be replaced with the close (cross) icon (by default on top right of the preview window). The layout template to control this markup is `layoutTemplates.close`.
 - `{preview}`: the content parsed by the `previewTemplate` and will be displayed only if `showPreview` is `true`.
 - `{caption}`: the content parsed by the `captionTemplate` and will be displayed only if `showCaption` is `true`.
 - `{remove}`: the file remove/clear button and will be displayed only if `showRemove` is `true`.
@@ -429,7 +430,7 @@ The `layoutTemplates` if not set will default to:
         '</div>',
     main2: '{preview}\n<div class="kv-upload-progress hide"></div>\n{remove}\n{cancel}\n{upload}\n{browse}\n',
     preview: '<div class="file-preview {class}">\n' +
-        '    <div class="close fileinput-remove">&times;</div>\n' +
+        '    {close}\n' +
         '    <div class="{dropClass}">\n' +
         '    <div class="file-preview-thumbnails">\n' +
         '    </div>\n' +
@@ -438,6 +439,7 @@ The `layoutTemplates` if not set will default to:
         '    <div class="kv-fileinput-error"></div>\n' +
         '    </div>\n' +
         '</div>',
+    close: '<div class="close fileinput-remove">&times;</div>',
     icon: '<span class="glyphicon glyphicon-file kv-caption-icon"></span>',
     caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' +
         '   <span class="file-caption-ellipsis">&hellip;</span>\n' +
@@ -646,6 +648,10 @@ This is by default setup as following:
 
 _array_ the list of allowed mime types for preview. This is set to null by default which means all possible mime types are allowed. This setting works in combination with `allowedPreviewTypes` to filter only the needed file types allowed for preview. You can check this [list of allowed mime types](http://www.sitepoint.com/web-foundations/mime-types-complete-list/) to add to this list if needed.
 
+### defaultPreviewContent
+
+_string_ the default content / markup to show by default in the preview window whenever the files are cleared or the input is cleared. This can be useful for use cases like showing the default user profile picture or profile image before upload to overwrite. This is a bit different from `initialPreview` in the sense, that the `initialPreview` content will always be displayed unless it is deleted or overwritten based on `overwriteInitial`. The `defaultPreviewContent` on the other hand will only be shown ONLY on initialization OR whenever you clear the preview. At other times when files have been selected this will be overwritten temporarily until file(s) selected is/are cleared.
+
 ### customLayoutTags
 
 _object_ the list of additional custom tags that will be replaced in the **layout** templates. This should be an associative array object of `key: value` pairs, where:

js/fileinput.js

@@ -21,7 +21,7 @@
     $.fn.fileinputLocales = {};
 
     var isIE, isEdge, handler, previewCache, getNum, hasFileAPISupport, hasDragDropSupport, hasFileUploadSupport, addCss,
-        STYLE_SETTING, OBJECT_PARAMS, DEFAULT_PREVIEW, defaultFileActionSettings, tMain1, tMain2, tPreview, tIcon,
+        STYLE_SETTING, OBJECT_PARAMS, DEFAULT_PREVIEW, defaultFileActionSettings, tMain1, tMain2, tPreview, tIcon, tClose,
         tCaption, tBtnDefault, tBtnLink, tBtnBrowse, tModal, tProgress, tFooter, tActions, tActionDelete, tActionUpload,
         tZoom, tGeneric, tHtml, tImage, tText, tVideo, tAudio, tFlash, tObject, tOther, defaultLayoutTemplates,
         defaultPreviewTemplates, defaultPreviewTypes, defaultPreviewSettings, defaultFileTypeSettings, isEmpty, isArray,
@@ -286,7 +286,7 @@
     '</div>';
     tMain2 = '{preview}\n<div class="kv-upload-progress hide"></div>\n{remove}\n{cancel}\n{upload}\n{browse}\n';
     tPreview = '<div class="file-preview {class}">\n' +
-    '    <div class="close fileinput-remove">&times;</div>\n' +
+    '    {close}' +
     '    <div class="{dropClass}">\n' +
     '    <div class="file-preview-thumbnails">\n' +
     '    </div>\n' +
@@ -295,6 +295,7 @@
     '    <div class="kv-fileinput-error"></div>\n' +
     '    </div>\n' +
     '</div>';
+    tClose = '<div class="close fileinput-remove">&times;</div>\n';
     tIcon = '<span class="glyphicon glyphicon-file kv-caption-icon"></span>';
     tCaption = '<div tabindex="500" class="form-control file-caption {class}">\n' +
     '   <div class="file-caption-name"></div>\n' +
@@ -400,6 +401,7 @@
         main1: tMain1,
         main2: tMain2,
         preview: tPreview,
+        close: tClose,
         zoom: tZoom,
         icon: tIcon,
         caption: tCaption,
@@ -908,7 +910,7 @@
             if (!self.isUploadable || !self.showPreview || $zone.length === 0 || self.getFileStack().length > 0 || !self.dropZoneEnabled) {
                 return;
             }
-            if ($zone.find('.file-preview-frame').length === 0) {
+            if ($zone.find('.file-preview-frame').length === 0 && isEmpty(self.defaultPreviewContent)) {
                 $zone.prepend('<div class="' + self.dropZoneTitleClass + '">' + self.dropZoneTitle + '</div>');
             }
             self.$container.removeClass('file-input-new');
@@ -1005,6 +1007,7 @@
             if (!self.$preview.find('.file-preview-frame').length || !self.showPreview) {
                 self.resetUpload();
             }
+            self.validateDefaultPreview();
         },
         initPreview: function (isInit) {
             var self = this, cap = self.initialCaption || '', out;
@@ -1222,6 +1225,7 @@
                 self.setCaption(cap);
                 self.$caption.attr('title', '');
                 addCss(self.$container, 'file-input-new');
+                self.validateDefaultPreview();
             }
             if (self.$container.find('.file-preview-frame').length === 0) {
                 if (!self.initCaption()) {
@@ -1245,6 +1249,18 @@
                 self.initCaption();
             }
         },
+        clearDefaultPreview: function() {
+            var self = this;
+            self.$preview.find('.file-default-preview').remove();
+        },
+        validateDefaultPreview: function() {
+            var self = this;
+            if (!self.showPreview || isEmpty(self.defaultPreviewContent)) {
+                return;
+            }
+            self.$preview.html('<div class="file-default-preview">' + self.defaultPreviewContent + '</div>');
+            self.$container.removeClass('file-input-new');
+        },
         resetPreviewThumbs: function (isAjax) {
             var self = this, out;
             if (isAjax) {
@@ -1926,6 +1942,7 @@
                     '">' + self.fileActionSettings.indicatorError + '</div>';
                 }
             }
+            self.clearDefaultPreview();
             self.$preview.append("\n" + previewOtherTemplate
                 .replace(/\{previewId}/g, previewId)
                 .replace(/\{frameClass}/g, frameClass)
@@ -1973,6 +1990,7 @@
                         .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height)
                         .replace(/\{footer}/g, footer).replace(/\{data}/g, data);
                 }
+                self.clearDefaultPreview();
                 self.$preview.append("\n" + content);
                 self.validateImage(i, previewId, caption, file.type);
             } else {
@@ -2408,12 +2426,15 @@
         },
         renderMain: function () {
             var self = this, dropCss = (self.isUploadable && self.dropZoneEnabled) ? ' file-drop-zone' : '',
-                preview = self.showPreview ? self.getLayoutTemplate('preview').replace(/\{class}/g, self.previewClass)
-                    .replace(/\{dropClass}/g, dropCss) : '',
+                close = !self.showClose ? '' : self.getLayoutTemplate('close'),
+                preview = !self.showPreview ? '' : self.getLayoutTemplate('preview')
+                    .replace(/\{class}/g, self.previewClass)
+                    .replace(/\{dropClass}/g, dropCss),
                 css = self.isDisabled ? self.captionClass + ' file-caption-disabled' : self.captionClass,
                 caption = self.captionTemplate.replace(/\{class}/g, css + ' kv-fileinput-caption');
             return self.mainTemplate.replace(/\{class}/g, self.mainClass)
                 .replace(/\{preview}/g, preview)
+                .replace(/\{close}/g, close)
                 .replace(/\{caption}/g, caption)
                 .replace(/\{upload}/g, self.renderButton('upload'))
                 .replace(/\{remove}/g, self.renderButton('remove'))
@@ -2505,6 +2526,7 @@
         showRemove: true,
         showUpload: true,
         showCancel: true,
+        showClose: true,
         showUploadedThumbs: true,
         autoReplace: false,
         mainClass: '',
@@ -2527,6 +2549,7 @@
         allowedPreviewMimeTypes: null,
         allowedFileTypes: null,
         allowedFileExtensions: null,
+        defaultPreviewContent: null,
         customLayoutTags: {},
         customPreviewTags: {},
         previewSettings: defaultPreviewSettings,