Updates to release v4.4.4

CHANGE.md

@@ -1,11 +1,22 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
-## version 4.4.4 (_under development_)
-
-**Date:** 01-Sep-2017
-
-- Prepare for new release
+## version 4.4.4
+
+**Date:** 09-Sep-2017
+
+**_This release adds Bootstrap v4.x support._**
+
+- (enh #1075): Enhance initial preview delete behavior (ensure `previewCache` splices deleted initial preview content items).
+- (enh #1073): Enhance `refresh` method to overwrite options.
+- (enh #1072): Enhance preview thumb templates to allow setting CSS styles (BC Breaking).
+- (enh #1071): Auto detect small screen width and auto style/auto fit preview thumbnails.
+- (enh #1070): Include new download action button for initial preview thumbnails.
+- (enh #1069): Enhance action buttons to parse new `{key}` & `{filename}` tags.
+- (bug #1068): Add ability to merge ajax callbacks when overriding ajax settings.
+- (bug #1066): Correct `removeFromPreviewOnError` validation.
+- (enh #1065): Enhancements to support Bootstrap v4.x framework.
+- (enh #1064): Update Chinese Translations.
 
 ## version 4.4.3
 

README.md

@@ -58,29 +58,34 @@ You can also manually install the plugin easily to your project. Just download t
 Step 1: Load the following assets in your header. 
 
 ```html
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+<!-- !-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
+<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
 <link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
-<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-<!-- piexif.min.js is only needed if you wish to resize images before upload to restore exif data.
-     This must be loaded before fileinput.min.js -->
+<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
+<!-- link href="path/to/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<!-- piexif.min.js is only needed for restoring exif data in resized images and when you 
+    wish to resize images before upload. This must be loaded before fileinput.min.js -->
 <script src="path/to/js/plugins/piexif.min.js" type="text/javascript"></script>
-<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
-     This must be loaded before fileinput.min.js -->
+<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
+    This must be loaded before fileinput.min.js -->
 <script src="path/to/js/plugins/sortable.min.js" type="text/javascript"></script>
-<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for HTML files.
-     This must be loaded before fileinput.min.js -->
+<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
+    HTML files. This must be loaded before fileinput.min.js -->
 <script src="path/to/js/plugins/purify.min.js" type="text/javascript"></script>
+<!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
+   3.3.x versions without popper.min.js. -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
+    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
 <!-- the main fileinput plugin file -->
 <script src="path/to/js/fileinput.min.js"></script>
-<!-- bootstrap.js below is needed if you wish to zoom and view file content 
-     in a larger detailed modal dialog -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
-<!-- optionally if you need a theme like font awesome theme you can include 
-    it as mentioned below -->
-<script src="path/to/themes/fa/theme.js"></script>
-<!-- optionally if you need translation for your language then include 
-    locale file as mentioned below -->
-<script src="path/to/js/locales/<lang>.js"></script>
+<!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
+<script src="path/to/js/fa.js"></script>
+<!-- optionally if you need translation for your language then include  locale file as mentioned below -->
+<script src="path/to/js/(lang).js"></script>
 ```
 
 If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `fileinput.min.css` and `fileinput.min.js`. The theme file `themes/fa/theme.js` can be optionally included for the font awesome icons styling. The locale file `<lang>.js` can be optionally included for translating for your language if needed.

css/fileinput-rtl.css

@@ -19,25 +19,11 @@
 }
 
 .kv-rtl .input-group-btn:last-child >.btn {
-   border-top-right-radius: 0 !important;
-   border-bottom-right-radius: 0 !important;
-   border-top-left-radius: 4px !important;
-   border-bottom-left-radius: 4px !important;
-
+    border-radius: 4px 0 0 4px;
 }
 
 .kv-rtl .input-group .form-control:first-child {
-    border-top-right-radius: 4px !important;
-    border-bottom-right-radius: 4px !important;
-    border-top-left-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-
- }
- 
-.kv-rtl .file-loading {
-    right: auto;
-    left: 0;
-    text-align: left;
+    border-radius: 0 4px 4px 0;
 }
 
 .kv-rtl .btn-file input[type=file] {
@@ -56,33 +42,6 @@
     text-align: right;
 }
 
-.kv-rtl .krajee-default.file-preview-frame {
-    box-shadow: -1px 1px 5px 0 #a2958a;
-    float: right;
-}
-
-.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover {
-    box-shadow: -3px 3px 5px 0 #333;
-}
-
-.kv-rtl .krajee-default .file-actions,
-.kv-rtl .krajee-default .file-other-error {
-    text-align: right;
-}
-
-.kv-rtl .krajee-default .file-footer-buttons {
-    float: left;
-}
-
-.kv-rtl .krajee-default .file-drag-handle,
-.kv-rtl .krajee-default .file-upload-indicator {
-    left: auto;
-    right: -6px;
-    padding: 8px 3px 1px 8px;
-    border-top-left-radius: 24px;
-    border-top-right-radius: 0;
-}
-
 .kv-rtl .file-drop-zone {
     margin: 12px 12px 12px 15px;
 }
@@ -115,7 +74,32 @@
     float: right!important;
 }
 
-.kv-rtl .modal-title {
-    text-align: right;
+.kv-rtl .float-right {
+    float: left!important;
+}
+
+.kv-rtl .float-left {
+    float: right!important;
+}
+
+.kv-rtl .kv-zoom-title {
     direction: ltr;
+}
+
+.kv-rtl .krajee-default.file-preview-frame {
+    box-shadow: -1px 1px 5px 0 #a2958a;
+    float: right;
+}
+
+.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover {
+    box-shadow: -3px 3px 5px 0 #333;
+}
+
+.kv-rtl .krajee-default .file-actions,
+.kv-rtl .krajee-default .file-other-error {
+    float: left;
+}
+
+.kv-rtl .krajee-default .file-drag-handle, .kv-rtl .krajee-default .file-upload-indicator {
+    float: right;
 }

css/fileinput-rtl.min.css

@@ -9,4 +9,4 @@
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */.kv-rtl{direction:rtl}.kv-rtl .close{float:left}.kv-rtl .input-group-btn:last-child>.btn{border-radius:4px 0 0 4px!important}.kv-rtl .input-group .form-control:first-child{border-radius:0 4px 4px 0!important}.kv-rtl .file-loading{right:auto;left:0;text-align:left}.kv-rtl .btn-file input[type=file]{right:auto;left:0;text-align:left;background:100% 0 none}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog,.kv-rtl .krajee-default .file-actions,.kv-rtl .krajee-default .file-other-error{text-align:right}.kv-rtl .krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.kv-rtl .krajee-default .file-footer-buttons{float:left}.kv-rtl .krajee-default .file-drag-handle,.kv-rtl .krajee-default .file-upload-indicator{left:auto;right:-6px;padding:8px 3px 1px 8px;border-top-left-radius:24px;border-top-right-radius:0}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .floating-buttons{left:10px;right:auto}.kv-rtl .floating-buttons .btn,.kv-rtl .kv-zoom-actions .btn{margin-right:3px}.kv-rtl .btn-prev{right:1px;left:auto}.kv-rtl .btn-next{left:1px;right:auto}.kv-rtl .pull-right{float:left!important}.kv-rtl .pull-left{float:right!important}.kv-rtl .modal-title{text-align:right;direction:ltr}
+ */.kv-rtl{direction:rtl}.kv-rtl .close{float:left}.kv-rtl .input-group-btn:last-child>.btn{border-radius:4px 0 0 4px}.kv-rtl .input-group .form-control:first-child{border-radius:0 4px 4px 0}.kv-rtl .btn-file input[type=file]{right:auto;left:0;text-align:left;background:100% 0 none}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog{text-align:right}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .floating-buttons{left:10px;right:auto}.kv-rtl .floating-buttons .btn,.kv-rtl .kv-zoom-actions .btn{margin-right:3px}.kv-rtl .btn-prev{right:1px;left:auto}.kv-rtl .btn-next{left:1px;right:auto}.kv-rtl .pull-right{float:left!important}.kv-rtl .pull-left{float:right!important}.kv-rtl .float-right{float:left!important}.kv-rtl .float-left{float:right!important}.kv-rtl .kv-zoom-title{direction:ltr}.kv-rtl .krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.kv-rtl .krajee-default .file-actions,.kv-rtl .krajee-default .file-other-error{float:left}.kv-rtl .krajee-default .file-drag-handle,.kv-rtl .krajee-default .file-upload-indicator{float:right}

css/fileinput.css

@@ -10,16 +10,61 @@
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
-.file-loading {
-    top: 0;
-    right: 0;
-    width: 25px;
-    height: 25px;
-    font-size: 999px;
-    text-align: right;
-    color: #fff;
+.kv-hidden {
+    display: none;
+}
+
+/* exif orientations */
+.rotate-2 {
+    transform: rotateY(180deg);
+}
+
+.rotate-3 {
+    transform: rotate(180deg);
+}
+
+.rotate-4 {
+    transform: rotate(180deg) rotateY(180deg);
+}
+
+.rotate-5 {
+    transform: rotate(270deg) rotateY(180deg);
+}
+
+.rotate-6 {
+    transform: rotate(90deg);
+}
+
+.rotate-7 {
+    transform: rotate(90deg) rotateY(180deg);
+}
+
+.rotate-8 {
+    transform: rotate(270deg);
+}
+
+/* other styles */
+input[type=file].file-loading, .file-loading input[type=file] {
+    width: 0;
+    height: 0;
+}
+
+.file-loading:before {
+    content: " Loading...";
+    display: inline-block;
+    position: relative;
+    padding-left: 20px;
+    line-height: 16px;
+    font-size: 13px;
+    font-variant: small-caps;
+    color: #999;
     background: transparent url('../img/loading.gif') top left no-repeat;
-    border: none;
+}
+
+.file-loading[dir=rtl]:before {
+    background: transparent url('../img/loading.gif') top right no-repeat;
+    padding-left: 0;
+    padding-right: 20px;
 }
 
 .file-object {
@@ -56,10 +101,6 @@
     height: 25px;
 }
 
-.file-zoom-dialog {
-    text-align: left;
-}
-
 .file-error-message {
     color: #a94442;
     background-color: #f2dede;
@@ -79,7 +120,7 @@
 }
 
 .file-caption-disabled {
-    background-color: #EEEEEE;
+    background-color: #eeeeee;
     cursor: not-allowed;
     opacity: 1;
 }
@@ -87,9 +128,24 @@
 .file-preview {
     border-radius: 5px;
     border: 1px solid #ddd;
-    padding: 5px;
+    padding: 8px;
     width: 100%;
     margin-bottom: 5px;
+    position: relative;
+}
+
+.file-preview .btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+.file-preview .fileinput-remove {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    line-height: 10px;
 }
 
 .file-preview-image {
@@ -99,7 +155,6 @@
 
 .krajee-default.file-preview-frame {
     position: relative;
-    display: table;
     margin: 8px;
     border: 1px solid #ddd;
     box-shadow: 1px 1px 5px 0 #a2958a;
@@ -113,17 +168,14 @@
 }
 
 .krajee-default.file-preview-frame .kv-file-content {
-    height: 170px;
+    width: 213px;
+    height: 160px;
 }
 
 .krajee-default.file-preview-frame .file-thumbnail-footer {
     height: 70px;
 }
 
-.krajee-default .file-preview-image {
-    vertical-align: middle;
-}
-
 .krajee-default .file-preview-text {
     display: block;
     color: #428bca;
@@ -140,33 +192,6 @@
     overflow: auto;
 }
 
-.krajee-default[data-template="audio"] .file-preview-audio {
-    display: table-cell;
-    vertical-align: middle;
-    height: 170px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-}
-
-.krajee-default .file-preview-audio audio {
-    vertical-align: middle;
-}
-
-.krajee-default .file-zoom-dialog .file-preview-text {
-    font-size: 1.2em;
-}
-
-.krajee-default .file-preview-other {
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    text-align: center;
-    vertical-align: middle;
-    padding: 10px;
-}
-
 .krajee-default .file-preview-other:hover {
     opacity: 0.8;
 }
@@ -176,11 +201,7 @@
 }
 
 .krajee-default .file-other-icon {
-    font-size: 8em;
-}
-
-.krajee-default .file-actions {
-    margin-top: 15px;
+    font-size: 6em;
 }
 
 .krajee-default .file-footer-buttons {
@@ -189,15 +210,11 @@
 
 .krajee-default .file-footer-caption {
     display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 160px;
     text-align: center;
     padding-top: 4px;
     font-size: 11px;
     color: #777;
-    margin: 5px auto;
+    margin-bottom: 15px;
 }
 
 .krajee-default .file-preview-error {
@@ -210,52 +227,18 @@
 }
 
 .krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
-    position: absolute;
-    text-align: center;
-    bottom: -6px;
-    left: -6px;
-    padding: 8px 8px 1px 3px;
-    border-left: none;
-    border-bottom: none;
-    border-right: 1px solid #8a6d3b;
-    border-top: 1px solid #8a6d3b;
-    border-top-right-radius: 24px;
-    font-size: 12px;
-}
-
-.krajee-default .file-drag-handle {
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}
-
-.krajee-default .file-upload-indicator {
-    font-size: 13px;
-    background-color: #fcf8e3;
-    border-color: #faebcc;
-    padding-bottom: 0;
-}
-
-.krajee-default.file-preview-error .file-upload-indicator {
-    background-color: #f2dede;
-    border-color: #ebccd1;
-}
-
-.krajee-default.file-preview-success .file-upload-indicator {
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-}
-
-.krajee-default.file-preview-loading .file-upload-indicator {
-    background-color: #e5e5e5;
-    border-color: #777;
+    float: left;
+    margin: 5px 0 -5px 0;
+    width: 16px;
+    height: 16px;
 }
 
 .krajee-default .file-thumb-progress {
-    height: 10px;
+    height: 11px;
 }
 
 .krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
-    height: 10px;
+    height: 11px;
     font-size: 9px;
     line-height: 10px;
 }
@@ -266,16 +249,38 @@
 
 .krajee-default .file-thumb-progress {
     position: absolute;
-    top: 35px;
+    top: 37px;
     left: 0;
     right: 0;
 }
 
+.krajee-default .file-caption-info,
+.krajee-default .file-size-info {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 160px;
+    height: 15px;
+    margin: auto;
+}
+
 .krajee-default.kvsortable-ghost {
     background: #e1edf7;
     border: 2px solid #a1abff;
 }
 
+.kv-upload-progress .progress,
+.kv-upload-progress .progress-bar {
+    height: 20px;
+    line-height: 20px;
+}
+
+.kv-upload-progress .progress {
+    margin: 10px 0;
+    overflow: hidden;
+}
+
 /* noinspection CssOverwrittenProperties */
 .file-zoom-dialog .file-other-icon {
     font-size: 22em;
@@ -361,6 +366,37 @@
     opacity: 0.65;
 }
 
+.file-zoom-dialog .modal-dialog {
+    position: relative;
+    width: auto;
+}
+
+.file-zoom-dialog .modal-header {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+
+.file-zoom-dialog .modal-header:before,
+.file-zoom-dialog .modal-header:after {
+    display: none;
+}
+
+@media (min-width: 576px) {
+    .file-zoom-dialog .modal-dialog {
+        max-width: 500px;
+    }
+}
+
+@media (min-width: 992px) {
+    .file-zoom-dialog .modal-lg {
+        max-width: 800px;
+    }
+}
+
 .file-zoom-fullscreen.modal {
     position: fixed;
     top: 0;
@@ -374,6 +410,8 @@
     margin: 0;
     width: 100%;
     height: 100%;
+    max-width: 100%;
+    max-height: 100%;
     padding: 0;
 }
 
@@ -386,10 +424,6 @@
     overflow-y: auto;
 }
 
-.file-zoom-dialog .modal-body {
-    position: relative !important;
-}
-
 .file-zoom-dialog .btn-navigate {
     position: absolute;
     padding: 0;
@@ -418,11 +452,10 @@
     margin-left: 3px;
 }
 
-.file-zoom-dialog .btn-navigate:not([disabled]):hover,
-.file-zoom-dialog .btn-navigate:not([disabled]):focus {
+.file-zoom-dialog .btn-navigate:not([disabled]):hover {
     outline: none;
     box-shadow: none;
-    opacity: 0.5;
+    opacity: 0.6;
 }
 
 .file-zoom-dialog .btn-navigate[disabled] {
@@ -490,35 +523,30 @@
     height: 100%;
 }
 
-/* exif orientations */
-.rotate-2 {
-    transform: rotateY(180deg);
-}
-
-.rotate-3 {
-    transform: rotate(180deg);
+.file-zoom-content .is-portrait-gt4 {
+    margin-top: 60px;
 }
 
-.rotate-4 {
-    transform: rotate(180deg) rotateY(180deg);
+.file-zoom-dialog .kv-zoom-title {
+    font-weight: 300;
+    color: #999;
 }
 
-.rotate-5 {
-    transform: rotate(270deg) rotateY(180deg);
-}
+@media screen and (max-width: 767px) {
+    .file-preview-thumbnails {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
 
-.rotate-6 {
-    transform: rotate(90deg);
+    .file-zoom-dialog .modal-header {
+        flex-direction: column;
+    }
 }
 
-.rotate-7 {
-    transform: rotate(90deg) rotateY(180deg);
-}
-
-.rotate-8 {
-    transform: rotate(270deg);
-}
-
-.file-zoom-content .is-portrait-gt4 {
-    margin-top: 60px;
+@media screen and (max-width: 350px) {
+    .krajee-default.file-preview-frame .kv-file-content {
+        width: 160px;
+    }
 }

js/locales/LANG.js

@@ -79,6 +79,7 @@
             removeTitle: 'Remove file',
             uploadTitle: 'Upload file',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'View details',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Not uploaded yet',

js/locales/ar.js

@@ -80,6 +80,7 @@
             removeTitle: 'إزالة الملف',
             uploadTitle: 'رفع الملف',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'مشاهدة التفاصيل',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'لم يتم الرفع بعد',

js/locales/az.js

@@ -80,6 +80,7 @@
             removeTitle: 'Faylı sil',
             uploadTitle: 'Faylı yüklə',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'məlumatlara bax',
             dragTitle: 'Yerini dəyiş və ya sırala',
             indicatorNewTitle: 'Davam edir',

js/locales/bg.js

@@ -79,6 +79,7 @@
             removeTitle: 'Махни файл',
             uploadTitle: 'Качване на файл',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Вижте детайли',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Все още не е качил',

js/locales/ca.js

@@ -79,6 +79,7 @@
             removeTitle: 'Eliminar arxiu',
             uploadTitle: 'Pujar arxiu',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Veure detalls',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'No pujat encara',

js/locales/cr.js

@@ -80,6 +80,7 @@
             removeTitle: 'Uklonite datoteku',
             uploadTitle: 'Postavi datoteku',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Pregledavati pojedinosti',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Još nije učitao',

js/locales/cz.js

@@ -79,6 +79,7 @@
             removeTitle: 'Odstranit soubor',
             uploadTitle: 'Nahrát soubor',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Zobrazit podrobnosti',
             dragTitle: 'Posunout / Přeskládat',
             indicatorNewTitle: 'Ještě nenahrál',

js/locales/da.js

@@ -79,6 +79,7 @@
             removeTitle: 'Fjern fil',
             uploadTitle: 'Upload fil',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Se detaljer',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Ikke uploadet endnu',

js/locales/de.js

@@ -77,6 +77,7 @@
             removeTitle: 'Datei entfernen',
             uploadTitle: 'Datei hochladen',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Details anzeigen',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Noch nicht hochgeladen',

js/locales/el.js

@@ -79,6 +79,7 @@
             removeTitle: 'Αφαιρέστε το αρχείο',
             uploadTitle: 'Μεταφορτώστε το αρχείο',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Δείτε λεπτομέρειες',
             dragTitle: 'Μετακίνηση/Προσπαρμογή',
             indicatorNewTitle: 'Δεν μεταφορτώθηκε ακόμα',

js/locales/es.js

@@ -79,6 +79,7 @@
             removeTitle: 'Eliminar archivo',
             uploadTitle: 'Subir archivo',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Ver detalles',
             dragTitle: 'Mover / Reordenar',
             indicatorNewTitle: 'No subido todavía',

js/locales/fa.js

@@ -80,6 +80,7 @@
             removeTitle: 'حذف فایل',
             uploadTitle: 'آپلود فایل',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'دیدن جزئیات',
             dragTitle: 'جابجایی / چیدمان',
             indicatorNewTitle: 'آپلود نشده است',

js/locales/fi.js

@@ -69,6 +69,7 @@
             removeTitle: 'Poista tiedosto',
             uploadTitle: 'Upload file',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Yksityiskohdat',
             dragTitle: 'Siirrä / Järjestele',
             indicatorNewTitle: 'Ei ladattu',

js/locales/gl.js

@@ -79,6 +79,7 @@
             removeTitle: 'Eliminar arquivo',
             uploadTitle: 'Subir arquivo',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Ver detalles',
             dragTitle: 'Mover / Reordenar',
             indicatorNewTitle: 'Non subido todavía',

js/locales/hu.js

@@ -79,6 +79,7 @@
             removeTitle: 'A fájl eltávolítása',
             uploadTitle: 'fájl feltöltése',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Részletek megtekintése',
             dragTitle: 'Mozgatás / Átrendezés',
             indicatorNewTitle: 'Nem feltöltött',

js/locales/id.js

@@ -80,6 +80,7 @@
             removeTitle: 'Hapus berkas',
             uploadTitle: 'Unggah berkas',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Tampilkan Rincian',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Belum diunggah',

js/locales/it.js

@@ -81,6 +81,7 @@
             removeTitle: 'Rimuovere il file',
             uploadTitle: 'Caricare un file',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Guarda i dettagli',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Non ancora caricato',

js/locales/kr.js

@@ -79,6 +79,7 @@
             removeTitle: '파일 지우기',
             uploadTitle: '파일 업로드 하기',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: '세부 정보 보기',
             dragTitle: '옭기기 / 재배열하기',
             indicatorNewTitle: '아직 업로드가 안되었습니다.',

js/locales/kz.js

@@ -67,6 +67,7 @@
             removeTitle: 'Файлды өшіру',
             uploadTitle: 'Файлды жүктеу',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'мәліметтерді көру',
             dragTitle: 'Орнын ауыстыру',
             indicatorNewTitle: 'Жүктелген жоқ',

js/locales/nl.js

@@ -79,6 +79,7 @@
             removeTitle: 'Verwijder bestand',
             uploadTitle: 'bestand uploaden',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Bekijk details',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Nog niet geupload',

js/locales/pl.js

@@ -69,6 +69,7 @@
             removeTitle: 'Usuń plik',
             uploadTitle: 'Przesyłanie pliku',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Pokaż szczegóły',
             dragTitle: 'Przenies / Ponownie zaaranżuj',
             indicatorNewTitle: 'Jeszcze nie przesłanych',

js/locales/pt-BR.js

@@ -79,6 +79,7 @@
             removeTitle: 'Remover arquivo',
             uploadTitle: 'Enviar arquivo',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Ver detalhes',
             dragTitle: 'Mover / Reordenar',
             indicatorNewTitle: 'Ainda não enviado',

js/locales/pt.js

@@ -79,6 +79,7 @@
             removeTitle: 'Remover arquivo',
             uploadTitle: 'Carregar arquivo',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Ver detalhes',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Ainda não carregou',

js/locales/ro.js

@@ -80,6 +80,7 @@
             removeTitle: 'Scoateți fișier',
             uploadTitle: 'Incarca fisier',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Vezi detalii',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Nu a încărcat încă',

js/locales/ru.js

@@ -80,6 +80,7 @@
             removeTitle: 'Удалить файл',
             uploadTitle: 'Загрузить файл',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'посмотреть детали',
             dragTitle: 'Переместить / Изменить порядок',
             indicatorNewTitle: 'Еще не загружен',

js/locales/sk.js

@@ -79,6 +79,7 @@
             removeTitle: 'Odstrániť súbor',
             uploadTitle: 'Nahrať súbor',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Zobraziť podrobnosti',
             dragTitle: 'Posunúť / Preskládať',
             indicatorNewTitle: 'Ešte nenahral',

js/locales/sl.js

@@ -77,6 +77,7 @@
             removeTitle: 'Odstrani datoteko',
             uploadTitle: 'Naloži datoteko',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Poglej podrobnosti',
             dragTitle: 'Premaki / Razporedi',
             indicatorNewTitle: 'Še ni naloženo',

js/locales/th.js

@@ -79,6 +79,7 @@
             removeTitle: 'ลบไฟล์',
             uploadTitle: 'อัปโหลดไฟล์',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'ดูรายละเอียด',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'ยังไม่ได้อัปโหลด',

js/locales/uk.js

@@ -80,6 +80,7 @@
             removeTitle: 'Видалити файл',
             uploadTitle: 'Загрузити файл',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Подивитися деталі',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: 'Ще не загружено',

js/locales/vi.js

@@ -80,6 +80,7 @@
             removeTitle: 'Gỡ bỏ',
             uploadTitle: 'Upload tập tin',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: 'Phóng lớn',
             dragTitle: 'Di chuyển / Sắp xếp lại',
             indicatorNewTitle: 'Chưa được upload',

js/locales/zh-TW.js

@@ -81,6 +81,7 @@
             removeTitle: '刪除檔案',
             uploadTitle: '上傳檔案',
             uploadRetryTitle: 'Retry upload',
+            downloadTitle: 'Download file',
             zoomTitle: '詳細資料',
             dragTitle: 'Move / Rearrange',
             indicatorNewTitle: '尚未上傳',

sass/fileinput.scss

@@ -18,17 +18,53 @@ $bootstrap-fileinput-img-path: "../img" !default;
 
 // COMMON STYLES
 // --------------------------
+$color_1: #999;
+$color_2: #a94442;
+$color_3: green;
+$color_4: #428bca;
+$color_5: #777;
+$color_6: #000;
+$color_7: #aaa;
+$color_8: #1c94c4;
+$font_family_1: Menlo, Monaco, Consolas, "Courier New", monospace;
+$background_color_1: #f2dede;
+$background_color_2: #eeeeee;
+$background_color_3: #f0f0f0;
+$background_color_4: #d9edf7;
+
+.kv-hidden {
+  display: none;
+}
+
+input[type=file].file-loading {
+  width: 0;
+  height: 0;
+}
 
 .file-loading {
-  top: 0;
-  right: 0;
-  width: 25px;
-  height: 25px;
-  font-size: 999px;
-  text-align: right;
-  color: #fff;
-  background: transparent url('#{$bootstrap-fileinput-img-path}/loading.gif') top left no-repeat;
-  border: none;
+  input[type=file] {
+    width: 0;
+    height: 0;
+  }
+  &:before {
+    content: " Loading...";
+    display: inline-block;
+    position: relative;
+    padding-left: 20px;
+    line-height: 16px;
+    font-size: 13px;
+    font-variant: small-caps;
+    color: $color_1;
+    background: transparent url('#{$bootstrap-fileinput-img-path}/loading.gif') top left no-repeat;
+  }
+}
+
+.file-loading[dir=rtl] {
+  &:before {
+    background: transparent url('../img/loading.gif') top right no-repeat;
+    padding-left: 0;
+    padding-right: 20px;
+  }
 }
 
 .file-object {
@@ -39,7 +75,6 @@ $bootstrap-fileinput-img-path: "../img" !default;
 .btn-file {
   position: relative;
   overflow: hidden;
-
   input[type=file] {
     position: absolute;
     top: 0;
@@ -52,6 +87,28 @@ $bootstrap-fileinput-img-path: "../img" !default;
     cursor: inherit;
     display: block;
   }
+  &::-ms-browse {
+    font-size: 10000px;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.file-preview {
+  .btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+  }
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  padding: 5px;
+  width: 100%;
+  margin-bottom: 5px;
+  .clickable {
+    cursor: pointer;
+  }
 }
 
 .file-caption-name {
@@ -61,108 +118,87 @@ $bootstrap-fileinput-img-path: "../img" !default;
   word-break: break-all;
 }
 
-.input-group-lg .file-caption-name {
-  height: 25px;
-}
-
-.file-zoom-dialog {
-  text-align: left;
+.input-group-lg {
+  .file-caption-name {
+    height: 25px;
+  }
 }
 
 .file-error-message {
-  color: #a94442;
-  background-color: #f2dede;
+  color: $color_2;
+  background-color: $background_color_1;
   margin: 5px;
   border: 1px solid #ebccd1;
   border-radius: 4px;
   padding: 15px;
-
-  pre, ul {
+  //noinspection CssOverwrittenProperties
+  pre {
     margin: 0;
     text-align: left;
-  }
-
-  pre {
     margin: 5px 0;
   }
+  ul {
+    margin: 0;
+    text-align: left;
+  }
 }
 
 .file-caption-disabled {
-  background-color: #EEEEEE;
+  background-color: $background_color_2;
   cursor: not-allowed;
   opacity: 1;
 }
 
-.file-preview {
-  border-radius: 5px;
-  border: 1px solid #ddd;
-  padding: 5px;
-  width: 100%;
-  margin-bottom: 5px;
+.file-preview-image {
+  font: 40px Impact, Charcoal, sans-serif;
+  color: $color_3;
 }
 
-.krajee-default {
-  &.file-preview-frame {
-    position: relative;
-    display: table;
-    margin: 8px;
-    border: 1px solid #ddd;
-    box-shadow: 1px 1px 5px 0 #a2958a;
-    padding: 6px;
-    float: left;
-    text-align: center;
-
-    &:not(.file-preview-error):hover {
+.krajee-default.file-preview-frame {
+  position: relative;
+  display: table;
+  margin: 8px;
+  border: 1px solid #ddd;
+  box-shadow: 1px 1px 5px 0 #a2958a;
+  padding: 6px;
+  float: left;
+  text-align: center;
+  &:not(.file-preview-error) {
+    &:hover {
       box-shadow: 3px 3px 5px 0 #333;
     }
-
-    .kv-file-content {
-      height: 170px;
-    }
-
-    .file-thumbnail-footer {
-      height: 70px;
-    }
   }
+  .kv-file-content {
+    height: 170px;
+  }
+  .file-thumbnail-footer {
+    height: 70px;
+  }
+}
 
+.krajee-default {
   .file-preview-image {
     vertical-align: middle;
-    font: 40px Impact, Charcoal, sans-serif;
-    color: green;
   }
-
   .file-preview-text {
     display: block;
-    color: #428bca;
+    color: $color_4;
     border: 1px solid #ddd;
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-family: $font_family_1;
     outline: none;
     padding: 8px;
     resize: none;
   }
-
   .file-preview-html {
     border: 1px solid #ddd;
     padding: 8px;
     overflow: auto;
   }
-
-  &[data-template="audio"] .file-preview-audio {
-    display: table-cell;
-    vertical-align: middle;
-    height: 170px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-  }
-
-  .file-preview-audio audio {
-    vertical-align: middle;
-  }
-
-  .file-zoom-dialog .file-preview-text {
-    font-size: 1.2em;
+  .file-preview-audio {
+    audio {
+      vertical-align: middle;
+    }
   }
-
   .file-preview-other {
     left: 0;
     top: 0;
@@ -172,161 +208,257 @@ $bootstrap-fileinput-img-path: "../img" !default;
     text-align: center;
     vertical-align: middle;
     padding: 10px;
-
     &:hover {
       opacity: 0.8;
     }
   }
-
-  .file-actions, .file-other-error {
+  .file-actions {
     text-align: left;
   }
-
-  .file-other-icon {
-    font-size: 8em;
+  .file-other-error {
+    text-align: left;
   }
-
-  .file-actions {
-    margin-top: 15px;
+  .file-other-icon {
+    font-size: 6em;
   }
-
   .file-footer-buttons {
     float: right;
   }
-
   .file-footer-caption {
     display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 160px;
     text-align: center;
     padding-top: 4px;
     font-size: 11px;
-    color: #777;
-    margin: 5px auto;
+    color: $color_5;
+    margin-bottom: 15px;
   }
-
   .file-preview-error {
     opacity: 0.65;
     box-shadow: none;
   }
-
-  .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
-    color: #000;
-  }
-
-  .file-drag-handle, .file-upload-indicator {
-    position: absolute;
-    text-align: center;
-    bottom: -6px;
-    left: -6px;
-    padding: 8px 8px 1px 3px;
-    border-left: none;
-    border-bottom: none;
-    border-right: 1px solid #8a6d3b;
-    border-top: 1px solid #8a6d3b;
-    border-top-right-radius: 24px;
-    font-size: 12px;
+  .file-preview-frame {
+    &:not(.file-preview-error) {
+      .file-footer-caption {
+        &:hover {
+          color: $color_6;
+        }
+      }
+    }
   }
-
   .file-drag-handle {
-    background-color: #d9edf7;
-    border-color: #bce8f1;
+    float: left;
+    margin: 5px 0 -5px 0;
+    width: 16px;
+    height: 16px;
   }
-
   .file-upload-indicator {
-    font-size: 13px;
-    background-color: #fcf8e3;
-    border-color: #faebcc;
-    padding-bottom: 0;
-  }
-
-  &.file-preview-error .file-upload-indicator {
-    background-color: #f2dede;
-    border-color: #ebccd1;
-  }
-
-  &.file-preview-success .file-upload-indicator {
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-  }
-
-  &.file-preview-loading .file-upload-indicator {
-    background-color: #e5e5e5;
-    border-color: #777;
+    float: left;
+    margin: 5px 0 -5px 0;
+    width: 16px;
+    height: 16px;
   }
-
   .file-thumb-progress {
-    height: 10px;
-
-    .progress, .progress-bar {
-      height: 10px;
+    height: 11px;
+    position: absolute;
+    top: 37px;
+    left: 0;
+    right: 0;
+    .progress {
+      height: 11px;
+      font-size: 9px;
+      line-height: 10px;
+    }
+    .progress-bar {
+      height: 11px;
       font-size: 9px;
       line-height: 10px;
     }
   }
-
   .file-thumbnail-footer {
     position: relative;
   }
-
-  .file-thumb-progress {
-    position: absolute;
-    top: 35px;
-    left: 0;
-    right: 0;
+  .file-caption-info {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 160px;
+    height: 15px;
+    margin: auto;
   }
+  .file-size-info {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 160px;
+    height: 15px;
+    margin: auto;
+  }
+}
 
-  &.kvsortable-ghost {
-    background: #e1edf7;
-    border: 2px solid #a1abff;
+.krajee-default[data-template="audio"] {
+  .file-preview-audio {
+    display: table-cell;
+    vertical-align: middle;
+    height: 170px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
   }
 }
 
-/* noinspection CssOverwrittenProperties */
+.krajee-default.kvsortable-ghost {
+  background: #e1edf7;
+  border: 2px solid #a1abff;
+}
+
+.kv-upload-progress {
+  .progress {
+    height: 20px;
+    line-height: 20px;
+    margin: 10px 0;
+    overflow: hidden;
+  }
+  .progress-bar {
+    height: 20px;
+    line-height: 20px;
+  }
+}
 
-.file-zoom-dialog .file-other-icon {
-  font-size: 8em;
-  font-size: 65vmin;
+//noinspection CssOverwrittenProperties
+.file-zoom-dialog {
+  .file-other-icon {
+    font-size: 22em;
+    font-size: 50vmin;
+  }
+  .modal-dialog {
+    position: relative;
+    width: auto;
+  }
+  .modal-header {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    &:before {
+      display: none;
+    }
+    &:after {
+      display: none;
+    }
+  }
+  .btn-navigate {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    text-decoration: none;
+    outline: none;
+    opacity: 0.7;
+    top: 45%;
+    font-size: 4em;
+    color: $color_8;
+    &:not([disabled]) {
+      &:hover {
+        outline: none;
+        box-shadow: none;
+        opacity: 0.5;
+      }
+      &:focus {
+        outline: none;
+        box-shadow: none;
+        opacity: 0.5;
+      }
+    }
+  }
+  .floating-buttons {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+  }
+  .kv-zoom-actions {
+    .btn {
+      margin-left: 3px;
+    }
+  }
+  .btn-navigate[disabled] {
+    opacity: 0.3;
+  }
+  .btn-prev {
+    left: 1px;
+  }
+  .btn-next {
+    right: 1px;
+  }
+  .kv-zoom-title {
+    font-weight: 300;
+    color: $color_1;
+  }
 }
 
 .file-input-new {
-  .file-preview, .close, .glyphicon-file, .fileinput-remove-button, .fileinput-upload-button {
+  .file-preview {
+    display: none;
+  }
+  .close {
+    display: none;
+  }
+  .glyphicon-file {
     display: none;
   }
+  .fileinput-remove-button {
+    display: none;
+  }
+  .fileinput-upload-button {
+    display: none;
+  }
+  .no-browse {
+    .input-group-btn {
+      display: none;
+    }
+    .form-control {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
 }
 
 .file-input-ajax-new {
-  .fileinput-remove-button, .fileinput-upload-button {
+  .fileinput-remove-button {
     display: none;
   }
+  .fileinput-upload-button {
+    display: none;
+  }
+  .no-browse {
+    .input-group-btn {
+      display: none;
+    }
+    .form-control {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
 }
 
 .file-caption-main {
   width: 100%;
 }
 
-.file-input-ajax-new .no-browse .input-group-btn, .file-input-new .no-browse .input-group-btn {
-  display: none;
-}
-
-.file-input-ajax-new .no-browse .form-control, .file-input-new .no-browse .form-control {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
 .file-thumb-loading {
   background: transparent url('#{$bootstrap-fileinput-img-path}/loading.gif') no-repeat scroll center center content-box !important;
 }
 
-.file-sortable .file-drag-handle {
-  cursor: move;
-  cursor: -webkit-grabbing;
-  opacity: 1;
-
-  &:hover {
-    opacity: 0.7;
+.file-sortable {
+  .file-drag-handle {
+    cursor: move;
+    cursor: -webkit-grabbing;
+    opacity: 1;
+    &:hover {
+      opacity: 0.7;
+    }
   }
 }
 
@@ -338,38 +470,36 @@ $bootstrap-fileinput-img-path: "../img" !default;
   vertical-align: middle;
   margin: 12px 15px 12px 12px;
   padding: 5px;
+  .file-preview-thumbnails {
+    cursor: default;
+  }
 }
 
 .file-drop-zone-title {
-  color: #aaa;
+  color: $color_7;
   font-size: 1.6em;
   padding: 85px 10px;
   cursor: default;
 }
 
-.file-preview .clickable, .clickable .file-drop-zone-title {
-  cursor: pointer;
+.clickable {
+  .file-drop-zone-title {
+    cursor: pointer;
+  }
 }
 
-.file-drop-zone {
-  &.clickable {
-    &:hover {
-      border: 2px dashed #999;
-    }
-
-    &:focus {
-      border: 2px solid #5acde2;
-    }
+.file-drop-zone.clickable {
+  &:hover {
+    border: 2px dashed #999;
   }
-
-  .file-preview-thumbnails {
-    cursor: default;
+  &:focus {
+    border: 2px solid #5acde2;
   }
 }
 
 .file-highlighted {
   border: 2px dashed #999 !important;
-  background-color: #f0f0f0;
+  background-color: $background_color_3;
 }
 
 .file-uploading {
@@ -377,114 +507,141 @@ $bootstrap-fileinput-img-path: "../img" !default;
   opacity: 0.65;
 }
 
-.file-zoom-fullscreen {
-  &.modal {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+.file-zoom-fullscreen.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
+.file-zoom-fullscreen {
   .modal-dialog {
     position: fixed;
     margin: 0;
     width: 100%;
     height: 100%;
+    max-width: 100%;
+    max-height: 100%;
     padding: 0;
   }
-
   .modal-content {
     border-radius: 0;
     box-shadow: none;
   }
-
   .modal-body {
     overflow-y: auto;
   }
 }
 
-.file-zoom-dialog {
-  .modal-body {
-    position: relative !important;
-  }
-
-  .btn-navigate {
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    text-decoration: none;
-    outline: none;
-    opacity: 0.7;
-    top: 45%;
-    font-size: 4em;
-    color: #1c94c4;
-  }
-
-  .floating-buttons {
-    position: absolute;
-    top: 5px;
-    right: 10px;
-  }
-}
-
 .floating-buttons {
   z-index: 3000;
-
   .btn {
     z-index: 3000;
+    margin-left: 3px;
   }
 }
 
-.file-zoom-dialog .kv-zoom-actions .btn, .floating-buttons .btn {
-  margin-left: 3px;
+.file-zoom-content {
+  height: 480px;
+  text-align: center;
+  .file-preview-image {
+    max-height: 100%;
+  }
+  .file-preview-video {
+    max-height: 100%;
+  }
+  > .file-object.type-image {
+    width: auto;
+    height: auto;
+    min-height: inherit;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  > .file-object.type-video {
+    width: auto;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  > .file-object.type-flash {
+    width: auto;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  > .file-object.type-audio {
+    width: auto;
+    height: 30px;
+  }
+  > .file-object.type-pdf {
+    width: 100%;
+  }
+  > .file-object.type-html {
+    width: 100%;
+  }
+  > .file-object.type-text {
+    width: 100%;
+  }
+  > .file-object.type-default {
+    width: 100%;
+  }
+  .is-portrait-gt4 {
+    margin-top: 60px;
+  }
 }
 
-.file-zoom-dialog {
-  .btn-navigate {
-    &:not([disabled]) {
-      &:hover, &:focus {
-        outline: none;
-        box-shadow: none;
-        opacity: 0.5;
-      }
-    }
+.file-preview-initial.sortable-chosen {
+  background-color: $background_color_4;
+}
 
-    &[disabled] {
-      opacity: 0.3;
-    }
+.hide-content {
+  .kv-file-content {
+    display: none;
   }
+}
 
-  .btn-prev {
-    left: 1px;
-  }
+/* exif orientations */
+.rotate-2 {
+  transform: rotateY(180deg);
+}
 
-  .btn-next {
-    right: 1px;
-  }
+.rotate-3 {
+  transform: rotate(180deg);
 }
 
-.file-zoom-content {
-  height: 480px;
-  text-align: center;
+.rotate-4 {
+  transform: rotate(180deg) rotateY(180deg);
+}
 
-  .file-preview-image {
-    max-height: 100%;
-  }
+.rotate-5 {
+  transform: rotate(270deg) rotateY(180deg);
 }
 
-.file-preview- .file-zoom-content .file-preview-video {
-  max-height: 100%;
+.rotate-6 {
+  transform: rotate(90deg);
 }
 
-.file-preview-initial.sortable-chosen {
-  background-color: #d9edf7;
+.rotate-7 {
+  transform: rotate(90deg) rotateY(180deg);
 }
 
-/* IE 10 fix */
+.rotate-8 {
+  transform: rotate(270deg);
+}
 
-.btn-file ::-ms-browse {
-  width: 100%;
-  height: 100%;
+@media (min-width: 576px) {
+  .file-zoom-dialog {
+    .modal-dialog {
+      max-width: 500px;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .file-zoom-dialog {
+    .modal-lg {
+      max-width: 800px;
+    }
+  }
 }

themes/explorer-fa/theme.css

@@ -2,7 +2,7 @@
  * bootstrap-fileinput v4.4.4
  * http://plugins.krajee.com/file-input
  *
- * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. 
+ * Krajee Explorer Font Awesome theme style for bootstrap-fileinput.
  * Load this theme file after loading `fileinput.css`. Ensure that
  * font awesome assets and CSS are loaded on the page as well.
  *
@@ -43,7 +43,13 @@
 }
 
 .explorer-frame .file-other-icon {
-    font-size: 4.2em;
+    font-size: 2.6em;
+}
+
+/* noinspection CssOverwrittenProperties */
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    font-size: 22em;
+    font-size: 50vmin;
 }
 
 .theme-explorer-fa .explorer-frame .kv-file-content {
@@ -75,17 +81,13 @@
 
 .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
     position: absolute;
+    display: inline-block;
     text-align: center;
     top: 0;
-    right: 0;
-    padding-left: 5px;
-    padding-right: 2px;
-    border-right: none;
-    border-top: none;
-    border-left: 1px solid #8a6d3b;
-    border-bottom: 1px solid #8a6d3b;
-    border-bottom-left-radius: 11px;
-    font-size: 12px;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
 }
 
 .theme-explorer-fa .explorer-caption {
@@ -103,47 +105,14 @@
     border: 2px solid #a1abff;
 }
 
-.theme-explorer-fa .file-upload-indicator {
-    font-size: 13px;
-    padding-left: 6px;
-    background-color: #fcf8e3;
-    border-color: #faebcc;
-}
-
-.theme-explorer-fa .file-drag-handle {
-    right: -2px;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}
-
-.theme-explorer-fa .file-preview-error .file-upload-indicator {
-    background-color: #f2dede;
-    border-color: #ebccd1;
-}
-
-.theme-explorer-fa .file-preview-success .file-upload-indicator {
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-}
-
-.theme-explorer-fa .file-preview-loading .file-upload-indicator {
-    background-color: #e5e5e5;
-    border-color: #777;
-}
-
 .theme-explorer-fa .file-error-message ul {
-    padding-left: 15px;
-}
-
-.theme-explorer-fa .file-error-message .close {
-    margin-top: -5px;
-    margin-right: -5px;
+    padding: 5px 0 0 20px;
 }
 
 /*
  * mobile responsive styling
  */
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 767px) {
     .theme-explorer-fa .table, .theme-explorer-fa .table tbody, .theme-explorer-fa .table tr, .theme-explorer-fa .table td {
         display: block;
         width: 100% !important;
@@ -198,17 +167,8 @@
     }
 
     .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
-        right: 0;
-        bottom: 0;
-        border-top-left-radius: 40px;
-        border-bottom-left-radius: 0;
-        padding: 12px 3px 0 6px;
-    }
-
-    .theme-explorer-fa .file-actions-cell .btn-xs {
-        font-size: 0.9em;
-        padding: 2px 7px;
-        margin-right: 3px;
-        cursor: pointer;
+        right: 3px;
+        bottom: 10px;
+        top: auto;
     }
 }

themes/explorer-fa/theme.js

@@ -58,15 +58,15 @@
         },
         frameClass: 'explorer-frame',
         fileActionSettings: {
-            removeIcon: '<i class="fa fa-trash text-danger"></i>',
-            uploadIcon: '<i class="fa fa-upload text-info"></i>',
-            uploadRetryIcon: '<i class="fa fa-repeat text-info"></i>',
+            removeIcon: '<i class="fa fa-trash"></i>',
+            uploadIcon: '<i class="fa fa-upload"></i>',
+            uploadRetryIcon: '<i class="fa fa-repeat"></i>',
             zoomIcon: '<i class="fa fa-search-plus"></i>',
-            dragIcon: '<i class="fa fa-bars"></i>',
-            indicatorNew: '<i class="fa fa-hand-o-down text-warning"></i>',
+            dragIcon: '<i class="fa fa-arrows"></i>',
+            indicatorNew: '<i class="fa fa-plus-circle text-warning"></i>',
             indicatorSuccess: '<i class="fa fa-check-circle text-success"></i>',
             indicatorError: '<i class="fa fa-exclamation-circle text-danger"></i>',
-            indicatorLoading: '<i class="fa fa-hand-o-up text-muted"></i>'
+            indicatorLoading: '<i class="fa fa-hourglass text-muted"></i>'
         },
         previewZoomButtonIcons: {
             prev: '<i class="fa fa-caret-left fa-lg"></i>',

themes/explorer/theme.css

@@ -41,7 +41,13 @@
 }
 
 .explorer-frame .file-other-icon {
-    font-size: 4.2em;
+    font-size: 2.6em;
+}
+
+/* noinspection CssOverwrittenProperties */
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    font-size: 22em;
+    font-size: 50vmin;
 }
 
 .theme-explorer .explorer-frame .kv-file-content {
@@ -73,17 +79,13 @@
 
 .theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle {
     position: absolute;
+    display: inline-block;
     text-align: center;
     top: 0;
-    right: 0;
-    padding-left: 5px;
-    padding-right: 2px;
-    border-right: none;
-    border-top: none;
-    border-left: 1px solid #8a6d3b;
-    border-bottom: 1px solid #8a6d3b;
-    border-bottom-left-radius: 11px;
-    font-size: 12px;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
 }
 
 .theme-explorer .explorer-caption {
@@ -101,47 +103,14 @@
     border: 2px solid #a1abff;
 }
 
-.theme-explorer .file-upload-indicator {
-    font-size: 13px;
-    padding-left: 6px;
-    background-color: #fcf8e3;
-    border-color: #faebcc;
-}
-
-.theme-explorer .file-drag-handle {
-    right: -2px;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}
-
-.theme-explorer .file-preview-error .file-upload-indicator {
-    background-color: #f2dede;
-    border-color: #ebccd1;
-}
-
-.theme-explorer .file-preview-success .file-upload-indicator {
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-}
-
-.theme-explorer .file-preview-loading .file-upload-indicator {
-    background-color: #e5e5e5;
-    border-color: #777;
-}
-
 .theme-explorer .file-error-message ul {
-    padding-left: 15px;
-}
-
-.theme-explorer .file-error-message .close {
-    margin-top: -5px;
-    margin-right: -5px;
+    padding: 5px 0 0 20px;
 }
 
 /*
  * mobile responsive styling
  */
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 767px) {
     .theme-explorer .table, .theme-explorer .table tbody, .theme-explorer .table tr, .theme-explorer .table td {
         display: block;
         width: 100% !important;
@@ -195,18 +164,9 @@
         margin: auto;
     }
 
-    .theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle {
-        right: 0;
-        bottom: 0;
-        border-top-left-radius: 40px;
-        border-bottom-left-radius: 0;
-        padding: 12px 3px 0 6px;
-    }
-
-    .theme-explorer .file-actions-cell .btn-xs {
-        font-size: 0.9em;
-        padding: 2px 7px;
-        margin-right: 3px;
-        cursor: pointer;
+    .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
+        right: 3px;
+        bottom: 10px;
+        top: auto;
     }
 }

themes/fa/theme.js

@@ -15,15 +15,15 @@
 
     $.fn.fileinputThemes.fa = {
         fileActionSettings: {
-            removeIcon: '<i class="fa fa-trash text-danger"></i>',
-            uploadIcon: '<i class="fa fa-upload text-info"></i>',
-            uploadRetryIcon: '<i class="fa fa-repeat text-info"></i>',
+            removeIcon: '<i class="fa fa-trash"></i>',
+            uploadIcon: '<i class="fa fa-upload"></i>',
+            uploadRetryIcon: '<i class="fa fa-repeat"></i>',
             zoomIcon: '<i class="fa fa-search-plus"></i>',
             dragIcon: '<i class="fa fa-bars"></i>',
-            indicatorNew: '<i class="fa fa-hand-o-down text-warning"></i>',
+            indicatorNew: '<i class="fa fa-plus-circle text-warning"></i>',
             indicatorSuccess: '<i class="fa fa-check-circle text-success"></i>',
             indicatorError: '<i class="fa fa-exclamation-circle text-danger"></i>',
-            indicatorLoading: '<i class="fa fa-hand-o-up text-muted"></i>'
+            indicatorLoading: '<i class="fa fa-hourglass text-muted"></i>'
         },
         layoutTemplates: {
             fileIcon: '<i class="fa fa-file kv-caption-icon"></i> '

themes/fa/theme.min.js

@@ -9,4 +9,4 @@
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */!function(a){"use strict";a.fn.fileinputThemes.fa={fileActionSettings:{removeIcon:'<i class="fa fa-trash text-danger"></i>',uploadIcon:'<i class="fa fa-upload text-info"></i>',zoomIcon:'<i class="fa fa-search-plus"></i>',dragIcon:'<i class="fa fa-bars"></i>',indicatorNew:'<i class="fa fa-hand-o-down text-warning"></i>',indicatorSuccess:'<i class="fa fa-check-circle text-success"></i>',indicatorError:'<i class="fa fa-exclamation-circle text-danger"></i>',indicatorLoading:'<i class="fa fa-hand-o-up text-muted"></i>'},layoutTemplates:{fileIcon:'<i class="fa fa-file kv-caption-icon"></i> '},previewZoomButtonIcons:{prev:'<i class="fa fa-caret-left fa-lg"></i>',next:'<i class="fa fa-caret-right fa-lg"></i>',toggleheader:'<i class="fa fa-arrows-v"></i>',fullscreen:'<i class="fa fa-arrows-alt"></i>',borderless:'<i class="fa fa-external-link"></i>',close:'<i class="fa fa-remove"></i>'},previewFileIcon:'<i class="fa fa-file"></i>',browseIcon:'<i class="fa fa-folder-open"></i>',removeIcon:'<i class="fa fa-trash"></i>',cancelIcon:'<i class="fa fa-ban"></i>',uploadIcon:'<i class="fa fa-upload"></i>',msgValidationErrorIcon:'<i class="fa fa-exclamation-circle"></i> '}}(window.jQuery);
+ */!function(a){"use strict";a.fn.fileinputThemes.fa={fileActionSettings:{removeIcon:'<i class="fa fa-trash"></i>',uploadIcon:'<i class="fa fa-upload"></i>',uploadRetryIcon:'<i class="fa fa-repeat"></i>',zoomIcon:'<i class="fa fa-search-plus"></i>',dragIcon:'<i class="fa fa-bars"></i>',indicatorNew:'<i class="fa fa-plus-circle text-warning"></i>',indicatorSuccess:'<i class="fa fa-check-circle text-success"></i>',indicatorError:'<i class="fa fa-exclamation-circle text-danger"></i>',indicatorLoading:'<i class="fa fa-hourglass text-muted"></i>'},layoutTemplates:{fileIcon:'<i class="fa fa-file kv-caption-icon"></i> '},previewZoomButtonIcons:{prev:'<i class="fa fa-caret-left fa-lg"></i>',next:'<i class="fa fa-caret-right fa-lg"></i>',toggleheader:'<i class="fa fa-arrows-v"></i>',fullscreen:'<i class="fa fa-arrows-alt"></i>',borderless:'<i class="fa fa-external-link"></i>',close:'<i class="fa fa-remove"></i>'},previewFileIcon:'<i class="fa fa-file"></i>',browseIcon:'<i class="fa fa-folder-open"></i>',removeIcon:'<i class="fa fa-trash"></i>',cancelIcon:'<i class="fa fa-ban"></i>',uploadIcon:'<i class="fa fa-upload"></i>',msgValidationErrorIcon:'<i class="fa fa-exclamation-circle"></i> '}}(window.jQuery);

themes/gly/theme.js

@@ -15,14 +15,14 @@
 
     $.fn.fileinputThemes.gly = {
         fileActionSettings: {
-            removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',
-            uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',
+            removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
+            uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
             zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',
-            dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',
-            indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>',
+            dragIcon: '<i class="glyphicon glyphicon-move"></i>',
+            indicatorNew: '<i class="glyphicon glyphicon-plus-sign text-warning"></i>',
             indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',
             indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',
-            indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>'
+            indicatorLoading: '<i class="glyphicon glyphicon-hourglass text-muted"></i>'
         },
         layoutTemplates: {
             fileIcon: '<i class="glyphicon glyphicon-file kv-caption-icon"></i>'

themes/gly/theme.min.js

@@ -9,4 +9,4 @@
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */!function(i){"use strict";i.fn.fileinputThemes.gly={fileActionSettings:{removeIcon:'<i class="glyphicon glyphicon-trash text-danger"></i>',uploadIcon:'<i class="glyphicon glyphicon-upload text-info"></i>',zoomIcon:'<i class="glyphicon glyphicon-zoom-in"></i>',dragIcon:'<i class="glyphicon glyphicon-menu-hamburger"></i>',indicatorNew:'<i class="glyphicon glyphicon-hand-down text-warning"></i>',indicatorSuccess:'<i class="glyphicon glyphicon-ok-sign text-success"></i>',indicatorError:'<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',indicatorLoading:'<i class="glyphicon glyphicon-hand-up text-muted"></i>'},layoutTemplates:{fileIcon:'<i class="glyphicon glyphicon-file kv-caption-icon"></i>'},previewZoomButtonIcons:{prev:'<i class="glyphicon glyphicon-triangle-left"></i>',next:'<i class="glyphicon glyphicon-triangle-right"></i>',toggleheader:'<i class="glyphicon glyphicon-resize-vertical"></i>',fullscreen:'<i class="glyphicon glyphicon-fullscreen"></i>',borderless:'<i class="glyphicon glyphicon-resize-full"></i>',close:'<i class="glyphicon glyphicon-remove"></i>'},previewFileIcon:'<i class="glyphicon glyphicon-file"></i>',browseIcon:'<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',removeIcon:'<i class="glyphicon glyphicon-trash"></i>',cancelIcon:'<i class="glyphicon glyphicon-ban-circle"></i>',uploadIcon:'<i class="glyphicon glyphicon-upload"></i>',msgValidationErrorIcon:'<i class="glyphicon glyphicon-exclamation-sign"></i> '}}(window.jQuery);
+ */!function(i){"use strict";i.fn.fileinputThemes.gly={fileActionSettings:{removeIcon:'<i class="glyphicon glyphicon-trash"></i>',uploadIcon:'<i class="glyphicon glyphicon-upload"></i>',zoomIcon:'<i class="glyphicon glyphicon-zoom-in"></i>',dragIcon:'<i class="glyphicon glyphicon-move"></i>',indicatorNew:'<i class="glyphicon glyphicon-plus-sign text-warning"></i>',indicatorSuccess:'<i class="glyphicon glyphicon-ok-sign text-success"></i>',indicatorError:'<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',indicatorLoading:'<i class="glyphicon glyphicon-hourglass text-muted"></i>'},layoutTemplates:{fileIcon:'<i class="glyphicon glyphicon-file kv-caption-icon"></i>'},previewZoomButtonIcons:{prev:'<i class="glyphicon glyphicon-triangle-left"></i>',next:'<i class="glyphicon glyphicon-triangle-right"></i>',toggleheader:'<i class="glyphicon glyphicon-resize-vertical"></i>',fullscreen:'<i class="glyphicon glyphicon-fullscreen"></i>',borderless:'<i class="glyphicon glyphicon-resize-full"></i>',close:'<i class="glyphicon glyphicon-remove"></i>'},previewFileIcon:'<i class="glyphicon glyphicon-file"></i>',browseIcon:'<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',removeIcon:'<i class="glyphicon glyphicon-trash"></i>',cancelIcon:'<i class="glyphicon glyphicon-ban-circle"></i>',uploadIcon:'<i class="glyphicon glyphicon-upload"></i>',msgValidationErrorIcon:'<i class="glyphicon glyphicon-exclamation-sign"></i> '}}(window.jQuery);