Updates to release v4.4.5

CHANGE.md

@@ -1,10 +1,11 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
-## version 4.4.5 (_under development_)
+## version 4.4.5
 
-**Date:** 30-Sep-2017
+**Date:** 01-Oct-2017
 
+- Update readme and example index to use plugin's CDN libraries.
 - (enh #1093): Revamp SCSS with better variables and extensions.
 - (enh #1091): Set default button type for close button markup template.
 - (enh #1090): Auto detect intelligently the preview type based on file content.

README.md

@@ -60,19 +60,19 @@ Step 1: Load the following assets in your header.
 ```html
 <!-- 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" />
+<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
 <!-- 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" /-->
+<!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/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>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/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 -->
-<script src="path/to/js/plugins/sortable.min.js" type="text/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/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 -->
-<script src="path/to/js/plugins/purify.min.js" type="text/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/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>
@@ -80,11 +80,11 @@ Step 1: Load the following assets in your header.
     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>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.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>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/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/(lang).js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/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

@@ -13,67 +13,86 @@
 .kv-rtl .close, .kv-rtl .krajee-default .file-actions, .kv-rtl .krajee-default .file-other-error {
     float: left;
 }
+
 .kv-rtl .krajee-default.file-preview-frame, .kv-rtl .krajee-default .file-drag-handle, .kv-rtl .krajee-default .file-upload-indicator {
     float: right;
 }
+
 .kv-rtl .file-zoom-dialog, .kv-rtl .file-error-message pre, .kv-rtl .file-error-message ul {
     text-align: right;
 }
+
 .kv-rtl {
     direction: rtl;
 }
+
 .kv-rtl .floating-buttons {
     left: 10px;
     right: auto;
 }
+
 .kv-rtl .floating-buttons .btn-kv {
     margin-left: 0;
     margin-right: 3px;
 }
+
 .kv-rtl .file-caption-icon {
     left: auto;
     right: 8px;
 }
+
 .kv-rtl .file-drop-zone {
     margin: 12px 12px 12px 15px;
 }
+
 .kv-rtl .btn-prev {
     right: 1px;
     left: auto;
 }
+
 .kv-rtl .btn-next {
     left: 1px;
     right: auto;
 }
+
 .kv-rtl .pull-right, .kv-rtl .float-right {
     float: left !important;
 }
+
 .kv-rtl .pull-left, .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;
 }
+
 .kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover {
     box-shadow: -3px 3px 5px 0 #333;
 }
+
 .kv-rtl .kv-zoom-actions .btn-kv {
     margin-left: 0;
     margin-right: 3px;
 }
+
 .kv-rtl .file-caption.icon-visible .file-caption-name {
     padding-left: 0;
     padding-right: 15px;
 }
+
 .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;

css/fileinput.css

@@ -14,32 +14,40 @@
     width: 0;
     height: 0;
 }
+
 .kv-hidden, .file-caption-icon, .file-zoom-dialog .modal-header:before, .file-zoom-dialog .modal-header:after, .file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button, .file-input-new .no-browse .input-group-btn, .file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button, .file-input-ajax-new .no-browse .input-group-btn, .hide-content .kv-file-content {
     display: none;
 }
+
 .btn-file input[type=file], .file-caption-icon, .file-preview .fileinput-remove, .krajee-default .file-thumb-progress, .file-zoom-dialog .btn-navigate, .file-zoom-dialog .floating-buttons {
     position: absolute;
 }
+
 .file-loading:before, .btn-file, .file-caption, .file-preview, .krajee-default.file-preview-frame, .krajee-default .file-thumbnail-footer, .file-zoom-dialog .modal-dialog {
     position: relative;
 }
+
 .file-error-message pre, .file-error-message ul, .krajee-default .file-actions, .krajee-default .file-other-error {
     text-align: left;
 }
+
 .file-error-message pre, .file-error-message ul {
     margin: 0;
 }
+
 .krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
     float: left;
     margin: 5px 0 -5px;
     width: 16px;
     height: 16px;
 }
+
 .krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
     height: 11px;
     font-size: 9px;
     line-height: 10px;
 }
+
 .krajee-default .file-caption-info, .krajee-default .file-size-info {
     display: block;
     white-space: nowrap;
@@ -49,38 +57,49 @@
     height: 15px;
     margin: auto;
 }
+
 .file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash, .file-zoom-content > .file-object.type-image {
     max-width: 100%;
     max-height: 100%;
     width: auto;
 }
+
 .file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash {
     height: 100%;
 }
+
 .file-zoom-content > .file-object.type-pdf, .file-zoom-content > .file-object.type-html, .file-zoom-content > .file-object.type-text, .file-zoom-content > .file-object.type-default {
     width: 100%;
 }
+
 .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);
 }
+
 .file-loading:before {
     content: " Loading...";
     display: inline-block;
@@ -91,13 +110,16 @@
     color: #999;
     background: transparent url(../img/loading.gif) top left no-repeat;
 }
+
 .file-object {
     margin: 0 0 -5px 0;
     padding: 0;
 }
+
 .btn-file {
     overflow: hidden;
 }
+
 .btn-file input[type=file] {
     top: 0;
     right: 0;
@@ -109,11 +131,13 @@
     cursor: inherit;
     display: block;
 }
+
 .btn-file ::-ms-browse {
     font-size: 10000px;
     width: 100%;
     height: 100%;
 }
+
 .file-caption .file-caption-name {
     width: 100%;
     margin: 0;
@@ -123,16 +147,20 @@
     background: none;
     outline: none;
 }
+
 .file-caption.icon-visible .file-caption-icon {
     display: inline-block;
 }
+
 .file-caption.icon-visible .file-caption-name {
     padding-left: 15px;
 }
+
 .file-caption-icon {
     line-height: 1;
     left: 8px;
 }
+
 .file-error-message {
     color: #a94442;
     background-color: #f2dede;
@@ -141,14 +169,17 @@
     border-radius: 4px;
     padding: 15px;
 }
+
 .file-error-message pre {
     margin: 5px 0;
 }
+
 .file-caption-disabled {
     background-color: #eee;
     cursor: not-allowed;
     opacity: 1;
 }
+
 .file-preview {
     border-radius: 5px;
     border: 1px solid #ddd;
@@ -156,24 +187,29 @@
     width: 100%;
     margin-bottom: 5px;
 }
+
 .file-preview .btn-xs {
     padding: 1px 5px;
     font-size: 12px;
     line-height: 1.5;
     border-radius: 3px;
 }
+
 .file-preview .fileinput-remove {
     top: 1px;
     right: 1px;
     line-height: 10px;
 }
+
 .file-preview .clickable {
     cursor: pointer;
 }
+
 .file-preview-image {
     font: 40px Impact, Charcoal, sans-serif;
     color: #008000;
 }
+
 .krajee-default.file-preview-frame {
     margin: 8px;
     border: 1px solid #ddd;
@@ -182,16 +218,20 @@
     float: left;
     text-align: center;
 }
+
 .krajee-default.file-preview-frame .kv-file-content {
     width: 213px;
     height: 160px;
 }
+
 .krajee-default.file-preview-frame .file-thumbnail-footer {
     height: 70px;
 }
+
 .krajee-default.file-preview-frame:not(.file-preview-error):hover {
     box-shadow: 3px 3px 5px 0 #333;
 }
+
 .krajee-default .file-preview-text {
     display: block;
     color: #428bca;
@@ -201,17 +241,21 @@
     padding: 8px;
     resize: none;
 }
+
 .krajee-default .file-preview-html {
     border: 1px solid #ddd;
     padding: 8px;
     overflow: auto;
 }
+
 .krajee-default .file-other-icon {
     font-size: 6em;
 }
+
 .krajee-default .file-footer-buttons {
     float: right;
 }
+
 .krajee-default .file-footer-caption {
     display: block;
     text-align: center;
@@ -220,49 +264,60 @@
     color: #777;
     margin-bottom: 15px;
 }
+
 .krajee-default .file-preview-error {
     opacity: 0.65;
     box-shadow: none;
 }
+
 .krajee-default .file-thumb-progress {
     height: 11px;
     top: 37px;
     left: 0;
     right: 0;
 }
+
 .krajee-default.kvsortable-ghost {
     background: #e1edf7;
     border: 2px solid #a1abff;
 }
+
 .krajee-default .file-preview-other:hover {
     opacity: 0.8;
 }
+
 .krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
     color: #000;
 }
+
 .kv-upload-progress .progress {
     height: 20px;
     line-height: 20px;
     margin: 10px 0;
     overflow: hidden;
 }
+
 .kv-upload-progress .progress-bar {
     height: 20px;
     line-height: 20px;
 }
+
 /*noinspection CssOverwrittenProperties*/
 .file-zoom-dialog .file-other-icon {
     font-size: 22em;
     font-size: 50vmin;
 }
+
 .file-zoom-dialog .modal-dialog {
     width: auto;
 }
+
 .file-zoom-dialog .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
+
 .file-zoom-dialog .btn-navigate {
     padding: 0;
     margin: 0;
@@ -274,24 +329,30 @@
     font-size: 4em;
     color: #1c94c4;
 }
+
 .file-zoom-dialog .btn-navigate:not([disabled]):hover {
     outline: none;
     box-shadow: none;
     opacity: 0.6;
 }
+
 .file-zoom-dialog .floating-buttons {
     top: 5px;
     right: 10px;
 }
+
 .file-zoom-dialog .btn-navigate[disabled] {
     opacity: 0.3;
 }
+
 .file-zoom-dialog .btn-prev {
     left: 1px;
 }
+
 .file-zoom-dialog .btn-next {
     right: 1px;
 }
+
 .file-zoom-dialog .kv-zoom-title {
     font-weight: 300;
     color: #999;
@@ -300,20 +361,25 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+
 .file-input-new .no-browse .form-control {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 }
+
 .file-input-ajax-new .no-browse .form-control {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 }
+
 .file-caption-main {
     width: 100%;
 }
+
 .file-thumb-loading {
     background: transparent url(../img/loading.gif) no-repeat scroll center center content-box !important;
 }
+
 .file-drop-zone {
     border: 1px dashed #aaa;
     border-radius: 4px;
@@ -323,39 +389,48 @@
     margin: 12px 15px 12px 12px;
     padding: 5px;
 }
+
 .file-drop-zone.clickable:hover {
     border: 2px dashed #999;
 }
+
 .file-drop-zone.clickable:focus {
     border: 2px solid #5acde2;
 }
+
 .file-drop-zone .file-preview-thumbnails {
     cursor: default;
 }
+
 .file-drop-zone-title {
     color: #aaa;
     font-size: 1.6em;
     padding: 85px 10px;
     cursor: default;
 }
+
 .file-highlighted {
     border: 2px dashed #999 !important;
     background-color: #eee;
 }
+
 .file-uploading {
     background: url(../img/loading-sm.gif) no-repeat center bottom 10px;
     opacity: 0.65;
 }
+
 @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;
@@ -363,6 +438,7 @@
     bottom: 0;
     left: 0;
 }
+
 .file-zoom-fullscreen .modal-dialog {
     position: fixed;
     margin: 0;
@@ -372,13 +448,16 @@
     max-width: 100%;
     max-height: 100%;
 }
+
 .file-zoom-fullscreen .modal-content {
     border-radius: 0;
     box-shadow: none;
 }
+
 .file-zoom-fullscreen .modal-body {
     overflow-y: auto;
 }
+
 .btn-kv {
     display: inline-block;
     text-align: center;
@@ -389,34 +468,43 @@
     font-size: 0.875rem;
     border-radius: 0.2rem;
 }
+
 .floating-buttons {
     z-index: 3000;
 }
+
 .floating-buttons .btn-kv {
     margin-left: 3px;
     z-index: 3000;
 }
+
 .file-zoom-content {
     height: 480px;
     text-align: center;
 }
+
 .file-zoom-content .file-preview-image {
     max-height: 100%;
 }
+
 .file-zoom-content .file-preview-video {
     max-height: 100%;
 }
+
 .file-zoom-content .is-portrait-gt4 {
     margin-top: 60px;
 }
+
 .file-zoom-content > .file-object.type-image {
     height: auto;
     min-height: inherit;
 }
+
 .file-zoom-content > .file-object.type-audio {
     width: auto;
     height: 30px;
 }
+
 @media screen and (max-width: 767px) {
     .file-preview-thumbnails {
         display: flex;
@@ -424,33 +512,41 @@
         align-items: center;
         flex-direction: column;
     }
+
     .file-zoom-dialog .modal-header {
         flex-direction: column;
     }
 }
+
 @media screen and (max-width: 350px) {
     .krajee-default.file-preview-frame .kv-file-content {
         width: 160px;
     }
 }
+
 .file-loading[dir=rtl]:before {
     background: transparent url(../img/loading.gif) top right no-repeat;
     padding-left: 0;
     padding-right: 20px;
 }
+
 .file-sortable .file-drag-handle {
     cursor: move;
     opacity: 1;
 }
+
 .file-sortable .file-drag-handle:hover {
     opacity: 0.7;
 }
+
 .clickable .file-drop-zone-title {
     cursor: pointer;
 }
+
 .kv-zoom-actions .btn-kv {
     margin-left: 3px;
 }
+
 .file-preview-initial.sortable-chosen {
     background-color: #d9edf7;
 }

examples/index.html

@@ -5,16 +5,19 @@
 <head>
     <meta charset="UTF-8"/>
     <title>Krajee JQuery Plugins - &copy; Kartik</title>
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
     <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
-    <link href="../themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css"/>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
+    <link href="../themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script src="../js/plugins/sortable.js" type="text/javascript"></script>
     <script src="../js/fileinput.js" type="text/javascript"></script>
     <script src="../js/locales/fr.js" type="text/javascript"></script>
     <script src="../js/locales/es.js" type="text/javascript"></script>
-    <script src="../themes/explorer/theme.js" type="text/javascript"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
+    <script src="../themes/explorer-fa/theme.js" type="text/javascript"></script>
+    <script src="../themes/fa/theme.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
 </head>
 <body>
 <div class="container kv-main">
@@ -25,9 +28,13 @@
         </h1>
     </div>
     <form enctype="multipart/form-data">
-        <input id="kv-explorer" type="file" multiple>
+        <div class="file-loading">
+            <input id="kv-explorer" type="file" multiple>
+        </div>
         <br>
-        <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
+        <div class="file-loading">
+            <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
+        </div>
         <br>
         <button type="submit" class="btn btn-primary">Submit</button>
         <button type="reset" class="btn btn-default">Reset</button>
@@ -35,7 +42,9 @@
     <hr>
     <form enctype="multipart/form-data">
         <label for="file-0b">Test invalid input type</label>
-        <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
+        <div class="file-loading">
+            <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
+        </div>
         <script>
             $(document).on('ready', function () {
                 $("#file-0b").fileinput();
@@ -44,27 +53,39 @@
     </form>
     <hr>
     <form enctype="multipart/form-data">
-        <input id="file-0c" class="file" type="file" multiple data-min-file-count="3">
+        <div class="file-loading">
+            <input id="file-0c" class="file" type="file" multiple data-min-file-count="3">
+        </div>
         <hr>
         <div class="form-group">
-            <input id="file-0d" class="file" type="file">
+            <div class="file-loading">
+                <input id="file-0d" class="file" type="file">
+            </div>
         </div>
         <hr>
         <div class="form-group">
-            <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
+            <div class="file-loading">
+                <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
+            </div>
         </div>
         <hr>
         <div class="form-group">
-            <input id="file-2" type="file" class="file" readonly data-show-upload="false">
+            <div class="file-loading">
+                <input id="file-2" type="file" class="file" readonly data-show-upload="false">
+            </div>
         </div>
         <hr>
         <div class="form-group">
-            <label>Preview File Icon</label>
-            <input id="file-3" type="file" multiple>
+            <div class="file-loading">
+                <label>Preview File Icon</label>
+                <input id="file-3" type="file" multiple>
+            </div>
         </div>
         <hr>
         <div class="form-group">
-            <input id="file-4" type="file" class="file" data-upload-url="#">
+            <div class="file-loading">
+                <input id="file-4" type="file" class="file" data-upload-url="#">
+            </div>
         </div>
         <hr>
         <div class="form-group">
@@ -75,12 +96,16 @@
         </div>
         <hr>
         <div class="form-group">
-            <input type="file" class="file" id="test-upload" multiple>
+            <div class="file-loading">
+                <input type="file" class="file" id="test-upload" multiple>
+            </div>
             <div id="errorBlock" class="help-block"></div>
         </div>
         <hr>
         <div class="form-group">
-            <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
+            <div class="file-loading">
+                <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
+            </div>
         </div>
     </form>
 
@@ -89,10 +114,14 @@
     <h4>Multi Language Inputs</h4>
     <form enctype="multipart/form-data">
         <label>French Input</label>
-        <input id="file-fr" name="file-fr[]" type="file" multiple>
+        <div class="file-loading">
+            <input id="file-fr" name="file-fr[]" type="file" multiple>
+        </div>
         <hr style="border: 2px dotted">
         <label>Spanish Input</label>
-        <input id="file-es" name="file-es[]" type="file" multiple>
+            <div class="file-loading">
+                <input id="file-es" name="file-es[]" type="file" multiple>
+            </div>
     </form>
     <hr>
     <br>
@@ -100,19 +129,23 @@
 </body>
 <script>
     $('#file-fr').fileinput({
+        theme: 'fa',
         language: 'fr',
         uploadUrl: '#',
         allowedFileExtensions: ['jpg', 'png', 'gif']
     });
     $('#file-es').fileinput({
+        theme: 'fa',
         language: 'es',
         uploadUrl: '#',
         allowedFileExtensions: ['jpg', 'png', 'gif']
     });
     $("#file-0").fileinput({
+        theme: 'fa',
         'allowedFileExtensions': ['jpg', 'png', 'gif']
     });
     $("#file-1").fileinput({
+        theme: 'fa',
         uploadUrl: '#', // you must set a valid URL here else you will get an error
         allowedFileExtensions: ['jpg', 'png', 'gif'],
         overwriteInitial: false,
@@ -129,6 +162,7 @@
      });
      */
     $("#file-3").fileinput({
+        theme: 'fa',
         showUpload: false,
         showCaption: false,
         browseClass: "btn btn-primary btn-lg",
@@ -148,6 +182,7 @@
         ]
     });
     $("#file-4").fileinput({
+        theme: 'fa',
         uploadExtraData: {kvId: '10'}
     });
     $(".btn-warning").on('click', function () {
@@ -171,12 +206,13 @@
      */
     $(document).ready(function () {
         $("#test-upload").fileinput({
+            'theme': 'fa',
             'showPreview': false,
             'allowedFileExtensions': ['jpg', 'png', 'gif'],
             'elErrorContainer': '#errorBlock'
         });
         $("#kv-explorer").fileinput({
-            'theme': 'explorer',
+            'theme': 'explorer-fa',
             'uploadUrl': '#',
             overwriteInitial: false,
             initialPreviewAsData: true,

scss/fileinput.scss

@@ -122,6 +122,10 @@ $border: 1px !default;
     @extend %set-hidden;
 }
 
+.hide-content .kv-file-content {
+    @extend %set-hidden;
+}
+
 .rotate-2 {
     transform: rotateY(180deg);
 }
@@ -167,6 +171,10 @@ $border: 1px !default;
     }
 }
 
+input[type=file].file-loading {
+    @extend %set-invisible;
+}
+
 .file-object {
     margin: 0 0 (-$pad) 0;
     padding: 0;
@@ -656,10 +664,6 @@ $border: 1px !default;
     }
 }
 
-input[type=file].file-loading {
-    @extend %set-invisible;
-}
-
 .file-loading[dir=rtl]:before {
     background: transparent $url-0 top right no-repeat;
     padding-left: 0;
@@ -684,8 +688,4 @@ input[type=file].file-loading {
 
 .file-preview-initial.sortable-chosen {
     background-color: $link-water;
-}
-
-.hide-content .kv-file-content {
-    @extend %set-hidden;
 }

themes/explorer-fa/theme.css

@@ -11,121 +11,146 @@
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
 .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle, .theme-explorer-fa .explorer-frame .kv-file-content, .theme-explorer-fa .file-actions, .explorer-frame .file-preview-other {
-  text-align: center;
+    text-align: center;
 }
+
 .theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .file-thumb-progress .progress-bar {
-  height: 13px;
-  font-size: 11px;
-  line-height: 13px;
+    height: 13px;
+    font-size: 11px;
+    line-height: 13px;
 }
+
 .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
-  position: absolute;
-  display: inline-block;
-  top: 0;
-  right: 3px;
-  width: 16px;
-  height: 16px;
-  font-size: 16px;
-}
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+}
+
 .theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .explorer-caption {
-  display: block;
+    display: block;
 }
+
 .theme-explorer-fa .explorer-frame td {
-  vertical-align: middle;
-  text-align: left;
+    vertical-align: middle;
+    text-align: left;
 }
+
 .theme-explorer-fa .explorer-frame .kv-file-content {
-  width: 80px;
-  height: 80px;
-  padding: 5px;
+    width: 80px;
+    height: 80px;
+    padding: 5px;
 }
+
 .theme-explorer-fa .file-actions-cell {
-  position: relative;
-  width: 120px;
-  padding: 0;
+    position: relative;
+    width: 120px;
+    padding: 0;
 }
+
 .theme-explorer-fa .file-thumb-progress .progress {
-  margin-top: 5px;
+    margin-top: 5px;
 }
+
 .theme-explorer-fa .explorer-caption {
-  color: #777;
+    color: #777;
 }
+
 .theme-explorer-fa .kvsortable-ghost {
-  opacity: 0.6;
-  background: #e1edf7;
-  border: 2px solid #a1abff;
+    opacity: 0.6;
+    background: #e1edf7;
+    border: 2px solid #a1abff;
 }
+
 .theme-explorer-fa .file-preview .table {
-  margin: 0;
+    margin: 0;
 }
+
 .theme-explorer-fa .file-error-message ul {
-  padding: 5px 0 0 20px;
+    padding: 5px 0 0 20px;
 }
+
 .explorer-frame .file-preview-text {
-  display: inline-block;
-  color: #428bca;
-  border: 1px solid #ddd;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-  outline: none;
-  padding: 8px;
-  resize: none;
-}
+    display: inline-block;
+    color: #428bca;
+    border: 1px solid #ddd;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    outline: none;
+    padding: 8px;
+    resize: none;
+}
+
 .explorer-frame .file-preview-html {
-  display: inline-block;
-  border: 1px solid #ddd;
-  padding: 8px;
-  overflow: auto;
+    display: inline-block;
+    border: 1px solid #ddd;
+    padding: 8px;
+    overflow: auto;
 }
+
 .explorer-frame .file-other-icon {
-  font-size: 2.6em;
+    font-size: 2.6em;
 }
+
 @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;
-  }
-  .theme-explorer-fa .table {
-    border: none;
-  }
-  .theme-explorer-fa .table tr {
-    margin-top: 5px;
-  }
-  .theme-explorer-fa .table tr:first-child {
-    margin-top: 0;
-  }
-  .theme-explorer-fa .table td {
-    text-align: center;
-  }
-  .theme-explorer-fa .table .kv-file-content {
-    border-bottom: none;
-    padding: 4px;
-    margin: 0;
-  }
-  .theme-explorer-fa .table .kv-file-content .file-preview-image {
-    max-width: 100%;
-    font-size: 20px;
-  }
-  .theme-explorer-fa .file-details-cell {
-    border-top: none;
-    border-bottom: none;
-    padding-top: 0;
-    margin: 0;
-  }
-  .theme-explorer-fa .file-actions-cell {
-    border-top: none;
-    padding-bottom: 4px;
-  }
-  .theme-explorer-fa .explorer-frame .explorer-caption {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    left: 0;
-    right: 0;
-    margin: auto;
-  }
-}
+    .theme-explorer-fa .table, .theme-explorer-fa .table tbody, .theme-explorer-fa .table tr, .theme-explorer-fa .table td {
+        display: block;
+        width: 100% !important;
+    }
+
+    .theme-explorer-fa .table {
+        border: none;
+    }
+
+    .theme-explorer-fa .table tr {
+        margin-top: 5px;
+    }
+
+    .theme-explorer-fa .table tr:first-child {
+        margin-top: 0;
+    }
+
+    .theme-explorer-fa .table td {
+        text-align: center;
+    }
+
+    .theme-explorer-fa .table .kv-file-content {
+        border-bottom: none;
+        padding: 4px;
+        margin: 0;
+    }
+
+    .theme-explorer-fa .table .kv-file-content .file-preview-image {
+        max-width: 100%;
+        font-size: 20px;
+    }
+
+    .theme-explorer-fa .file-details-cell {
+        border-top: none;
+        border-bottom: none;
+        padding-top: 0;
+        margin: 0;
+    }
+
+    .theme-explorer-fa .file-actions-cell {
+        border-top: none;
+        padding-bottom: 4px;
+    }
+
+    .theme-explorer-fa .explorer-frame .explorer-caption {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+}
+
 /*noinspection CssOverwrittenProperties*/
 .file-zoom-dialog .explorer-frame .file-other-icon {
-  font-size: 22em;
-  font-size: 50vmin;
+    font-size: 22em;
+    font-size: 50vmin;
 }

themes/explorer/theme.css

@@ -11,121 +11,146 @@
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
 .theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle, .theme-explorer .explorer-frame .kv-file-content, .theme-explorer .file-actions, .explorer-frame .file-preview-other {
-  text-align: center;
+    text-align: center;
 }
+
 .theme-explorer .file-thumb-progress .progress, .theme-explorer .file-thumb-progress .progress-bar {
-  height: 13px;
-  font-size: 11px;
-  line-height: 13px;
+    height: 13px;
+    font-size: 11px;
+    line-height: 13px;
 }
+
 .theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle {
-  position: absolute;
-  display: inline-block;
-  top: 0;
-  right: 3px;
-  width: 16px;
-  height: 16px;
-  font-size: 16px;
-}
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+}
+
 .theme-explorer .file-thumb-progress .progress, .theme-explorer .explorer-caption {
-  display: block;
+    display: block;
 }
+
 .theme-explorer .explorer-frame td {
-  vertical-align: middle;
-  text-align: left;
+    vertical-align: middle;
+    text-align: left;
 }
+
 .theme-explorer .explorer-frame .kv-file-content {
-  width: 80px;
-  height: 80px;
-  padding: 5px;
+    width: 80px;
+    height: 80px;
+    padding: 5px;
 }
+
 .theme-explorer .file-actions-cell {
-  position: relative;
-  width: 120px;
-  padding: 0;
+    position: relative;
+    width: 120px;
+    padding: 0;
 }
+
 .theme-explorer .file-thumb-progress .progress {
-  margin-top: 5px;
+    margin-top: 5px;
 }
+
 .theme-explorer .explorer-caption {
-  color: #777;
+    color: #777;
 }
+
 .theme-explorer .kvsortable-ghost {
-  opacity: 0.6;
-  background: #e1edf7;
-  border: 2px solid #a1abff;
+    opacity: 0.6;
+    background: #e1edf7;
+    border: 2px solid #a1abff;
 }
+
 .theme-explorer .file-preview .table {
-  margin: 0;
+    margin: 0;
 }
+
 .theme-explorer .file-error-message ul {
-  padding: 5px 0 0 20px;
+    padding: 5px 0 0 20px;
 }
+
 .explorer-frame .file-preview-text {
-  display: inline-block;
-  color: #428bca;
-  border: 1px solid #ddd;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-  outline: none;
-  padding: 8px;
-  resize: none;
-}
+    display: inline-block;
+    color: #428bca;
+    border: 1px solid #ddd;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    outline: none;
+    padding: 8px;
+    resize: none;
+}
+
 .explorer-frame .file-preview-html {
-  display: inline-block;
-  border: 1px solid #ddd;
-  padding: 8px;
-  overflow: auto;
+    display: inline-block;
+    border: 1px solid #ddd;
+    padding: 8px;
+    overflow: auto;
 }
+
 .explorer-frame .file-other-icon {
-  font-size: 2.6em;
+    font-size: 2.6em;
 }
+
 @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;
-  }
-  .theme-explorer .table {
-    border: none;
-  }
-  .theme-explorer .table tr {
-    margin-top: 5px;
-  }
-  .theme-explorer .table tr:first-child {
-    margin-top: 0;
-  }
-  .theme-explorer .table td {
-    text-align: center;
-  }
-  .theme-explorer .table .kv-file-content {
-    border-bottom: none;
-    padding: 4px;
-    margin: 0;
-  }
-  .theme-explorer .table .kv-file-content .file-preview-image {
-    max-width: 100%;
-    font-size: 20px;
-  }
-  .theme-explorer .file-details-cell {
-    border-top: none;
-    border-bottom: none;
-    padding-top: 0;
-    margin: 0;
-  }
-  .theme-explorer .file-actions-cell {
-    border-top: none;
-    padding-bottom: 4px;
-  }
-  .theme-explorer .explorer-frame .explorer-caption {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    left: 0;
-    right: 0;
-    margin: auto;
-  }
-}
+    .theme-explorer .table, .theme-explorer .table tbody, .theme-explorer .table tr, .theme-explorer .table td {
+        display: block;
+        width: 100% !important;
+    }
+
+    .theme-explorer .table {
+        border: none;
+    }
+
+    .theme-explorer .table tr {
+        margin-top: 5px;
+    }
+
+    .theme-explorer .table tr:first-child {
+        margin-top: 0;
+    }
+
+    .theme-explorer .table td {
+        text-align: center;
+    }
+
+    .theme-explorer .table .kv-file-content {
+        border-bottom: none;
+        padding: 4px;
+        margin: 0;
+    }
+
+    .theme-explorer .table .kv-file-content .file-preview-image {
+        max-width: 100%;
+        font-size: 20px;
+    }
+
+    .theme-explorer .file-details-cell {
+        border-top: none;
+        border-bottom: none;
+        padding-top: 0;
+        margin: 0;
+    }
+
+    .theme-explorer .file-actions-cell {
+        border-top: none;
+        padding-bottom: 4px;
+    }
+
+    .theme-explorer .explorer-frame .explorer-caption {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+}
+
 /*noinspection CssOverwrittenProperties*/
 .file-zoom-dialog .explorer-frame .file-other-icon {
-  font-size: 22em;
-  font-size: 50vmin;
+    font-size: 22em;
+    font-size: 50vmin;
 }