Updates to release v4.3.7

CHANGE.md

@@ -1,9 +1,9 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
-## version 4.3.7
+## version 4.3.7 (_under development_)
 
-**Date:** 01-Feb-2017
+**Date:** 05-Feb-2017
 
 1. (enh #812): Update Greek Translations.
 2. (enh #815): Enhance parsing of thumbnails that are visible in preview (will allow plugin to be 
@@ -29,6 +29,12 @@ Change Log: `bootstrap-fileinput`
 21. (enh #851): Create Kazakh Translations. 
 22. (bug #852): Ensure `frameClass` setting in `initialPreviewConfig` is considered. 
 23. (enh #854): Better file size calculation and display.
+24. (enh #857): Default error handling for unknown ajax errors.
+25. (enh #858): Thumb Frame CSS class as configurable property.
+26. (enh #859): Enhance and revamp preview caching.
+27. (enh #860): Initialize template defaults in a better manner.
+28. (enh #861): New properties within `layoutTemplates`.
+29. (enh #862): Launch a brand new Krajee theme: `explorer`.
 
 ## version 4.3.6
 

css/fileinput.css

@@ -2,6 +2,8 @@
  * bootstrap-fileinput v4.3.7
  * http://plugins.krajee.com/file-input
  *
+ * Krajee default styling for bootstrap-fileinput.
+ *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
  *
@@ -90,7 +92,7 @@
     margin-bottom: 5px;
 }
 
-.file-preview-frame {
+.krajee-default.file-preview-frame {
     position: relative;
     display: table;
     margin: 8px;
@@ -103,16 +105,16 @@
     vertical-align: middle;
 }
 
-.file-preview-frame:not(.file-preview-error):hover {
+.krajee-default.file-preview-frame:not(.file-preview-error):hover {
     box-shadow: 3px 3px 5px 0 #333;
 }
 
-.file-preview-image {
+.krajee-default .file-preview-image {
     vertical-align: middle;
     image-orientation: from-image;
 }
 
-.file-preview-text {
+.krajee-default .file-preview-text {
     display: block;
     color: #428bca;
     border: 1px solid #ddd;
@@ -122,17 +124,17 @@
     resize: none;
 }
 
-.file-preview-html {
+.krajee-default .file-preview-html {
     border: 1px solid #ddd;
     padding: 8px;
     overflow: auto;
 }
 
-.file-zoom-dialog .file-preview-text {
+.krajee-default .file-zoom-dialog .file-preview-text {
     font-size: 1.2em;
 }
 
-.file-preview-other {
+.krajee-default .file-preview-other {
     left: 0;
     top: 0;
     right: 0;
@@ -143,18 +145,115 @@
     padding: 10px;
 }
 
-.file-preview-other:hover {
+.krajee-default .file-preview-other:hover {
     opacity: 0.8;
 }
 
-.file-actions, .file-other-error {
+.krajee-default .file-actions, .krajee-default .file-other-error {
     text-align: left;
 }
 
-.file-other-icon {
+.krajee-default .file-other-icon {
     font-size: 4.8em;
 }
 
+.krajee-default .file-actions {
+    margin-top: 15px;
+}
+
+.krajee-default .file-footer-buttons {
+    float: right;
+}
+
+.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;
+}
+
+.krajee-default .file-preview-error {
+    opacity: 0.65;
+    box-shadow: none;
+}
+
+.krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
+    color: #000;
+}
+
+.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;
+}
+
+.krajee-default .file-thumb-progress {
+    height: 10px;
+}
+
+.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
+    height: 10px;
+    font-size: 9px;
+    line-height: 10px;
+}
+
+.krajee-default .file-thumbnail-footer {
+    position: relative;
+}
+
+.krajee-default .file-thumb-progress {
+    position: absolute;
+    top: 35px;
+    left: 0;
+    right: 0;
+}
+
+.krajee-default.kvsortable-ghost {
+    background: #e1edf7;
+    border: 2px solid #a1abff;
+}
+
 /* noinspection CssOverwrittenProperties */
 .file-zoom-dialog .file-other-icon {
     font-size: 8em;
@@ -186,46 +285,14 @@
     background: transparent url('../img/loading.gif') no-repeat scroll center center content-box !important;
 }
 
-.file-actions {
-    margin-top: 15px;
-}
-
-.file-footer-buttons {
-    float: right;
-}
-
-.file-upload-indicator {
-    display: inline;
-    cursor: default;
-    opacity: 0.8;
-    width: 60%;
-}
-
-.file-upload-indicator:hover {
-    font-weight: bold;
+.file-sortable .file-drag-handle {
+    cursor: move;
+    cursor: -webkit-grabbing;
     opacity: 1;
 }
 
-.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;
-}
-
-.file-preview-error {
-    opacity: 0.65;
-    box-shadow: none;
-}
-
-.file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
-    color: #000;
+.file-sortable .file-drag-handle:hover {
+    opacity: 0.7;
 }
 
 .file-drop-zone {
@@ -272,27 +339,6 @@
     opacity: 0.65;
 }
 
-.file-thumb-progress {
-    height: 10px;
-}
-
-.file-thumb-progress .progress, .file-thumb-progress .progress-bar {
-    height: 10px;
-    font-size: 9px;
-    line-height: 10px;
-}
-
-.file-thumbnail-footer {
-    position: relative;
-}
-
-.file-thumb-progress {
-    position: absolute;
-    top: 35px;
-    left: 0;
-    right: 0;
-}
-
 .file-zoom-fullscreen.modal {
     position: fixed;
     top: 0;
@@ -369,24 +415,6 @@
     right: 1px;
 }
 
-.file-drag-handle {
-    display: inline;
-    margin-right: 2px;
-    font-size: 16px;
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.file-sortable .file-drag-handle {
-    cursor: move;
-    cursor: -webkit-grabbing;
-    opacity: 1;
-}
-
-.file-sortable .file-drag-handle:hover {
-    opacity: 0.7;
-}
-
 .file-zoom-content {
     height: 480px;
     text-align: center;
@@ -396,10 +424,6 @@
     background-color: #d9edf7;
 }
 
-.file-preview-frame.sortable-ghost {
-    background-color: #eee;
-}
-
 /* IE 10 fix */
 .btn-file ::-ms-browse {
     width: 100%;

examples/index.html

@@ -7,10 +7,13 @@
     <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="../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>
+    <script src="../js/plugins/sortable.js" type="text/javascript"></script>
     <script src="../js/fileinput.js" type="text/javascript"></script>
     <script src="../js/fileinput_locale_fr.js" type="text/javascript"></script>
     <script src="../js/fileinput_locale_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>
 </head>
 <body>
@@ -22,6 +25,8 @@
         </h1>
     </div>
     <form enctype="multipart/form-data">
+        <input id="kv-explorer" type="file" multiple>
+        <br>
         <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
         <br>
         <button type="submit" class="btn btn-primary">Submit</button>
@@ -128,7 +133,19 @@
         showCaption: false,
         browseClass: "btn btn-primary btn-lg",
         fileType: "any",
-        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
+        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
+        overwriteInitial: false,
+        initialPreviewAsData: true,
+        initialPreview: [
+            "http://lorempixel.com/1920/1080/transport/1",
+            "http://lorempixel.com/1920/1080/transport/2",
+            "http://lorempixel.com/1920/1080/transport/3",
+        ],
+        initialPreviewConfig: [
+            {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
+            {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
+            {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3},
+        ],
     });
     $("#file-4").fileinput({
         uploadExtraData: {kvId: '10'}
@@ -158,6 +175,22 @@
             'allowedFileExtensions': ['jpg', 'png', 'gif'],
             'elErrorContainer': '#errorBlock'
         });
+        $("#kv-explorer").fileinput({
+            'theme': 'explorer',
+            'uploadUrl': '#',
+            overwriteInitial: false,
+            initialPreviewAsData: true,
+            initialPreview: [
+                "http://lorempixel.com/1920/1080/nature/1",
+                "http://lorempixel.com/1920/1080/nature/2",
+                "http://lorempixel.com/1920/1080/nature/3",
+            ],
+            initialPreviewConfig: [
+                {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
+                {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
+                {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3},
+            ]
+        });
         /*
          $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
          alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);

js/locales/LANG.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Height of image file "{name}" cannot exceed {size} px.',
         msgImageResizeError: 'Could not get the image dimensions to resize.',
         msgImageResizeException: 'Error while resizing the image.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Drag & drop files here &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/ar.js

@@ -62,6 +62,13 @@
         msgImageHeightLarge: 'طول ملف الصورة "{name}" لا يمكن أن يتعدى {size} px.',
         msgImageResizeError: 'لم يتمكن من معرفة أبعاد الصورة لتغييرها.',
         msgImageResizeException: 'حدث خطأ أثناء تغيير أبعاد الصورة.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'اسحب وأفلت الملفات هنا &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/bg.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Височината на изображението "{name}" нее може да е по-голяма от {size} px.',
         msgImageResizeError: 'Не може да размерите на изображението, за да промените размера.',
         msgImageResizeException: 'Грешка при промяна на размера на изображението.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Пуснете файловете тук &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/ca.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'L\'alçada de la imatge "{name}" no pot excedir de {size} px.',
         msgImageResizeError: 'No s\'ha pogut obtenir les dimensions d\'imatge per canviar la mida.',
         msgImageResizeException: 'Error en canviar la mida de la imatge.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Arrossegueu i deixeu anar aquí els arxius &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/cr.js

@@ -62,6 +62,13 @@
         msgImageHeightLarge: 'Visina slikovnu datoteku "{name}" ne može prelaziti {size} px.',
         msgImageResizeError: 'Nije mogao dobiti dimenzije slike na veličinu.',
         msgImageResizeException: 'Greška prilikom promjene veličine slike.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Prevucite datoteke ovde &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/cz.js

@@ -50,6 +50,13 @@
         msgImageHeightLarge: 'Výška obrázku "{name}" nesmí být větší než {size} px.',
         msgImageResizeError: 'Nelze získat rozměry obrázku pro změnu velikosti.',
         msgImageResizeException: 'Chyba při změně velikosti obrázku.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Přetáhni soubory sem &hellip;',
         dropZoneClickTitle: '<br>(nebo klikni sem a vyber je)',
         fileActionSettings: {

js/locales/da.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Højden af billedet "{name}" må ikke være over {size} px.',
         msgImageResizeError: 'Kunne ikke få billedets dimensioner for at ændre størrelsen.',
         msgImageResizeException: 'Fejl ved at ændre størrelsen på billedet.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Drag & drop filer her &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/de.js

@@ -59,6 +59,13 @@
         msgImageHeightLarge: 'Höhe der Bilddatei "{name}" nicht überschreiten {size} px.',
         msgImageResizeError: 'Konnte nicht die Bildabmessungen zu ändern.',
         msgImageResizeException: 'Fehler beim Ändern der Größe des Bildes.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Dateien hierher ziehen &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/el.js

@@ -60,6 +60,13 @@
         msgImageHeightLarge: 'Το ύψος του αρχείου εικόνας "{name}" δεν μπορεί να υπερβαίνει το {size} px.',
         msgImageResizeError: 'Δεν μπορούν να βρεθούν οι διαστάσεις της εικόνας για να αλλάγή μεγέθους.',
         msgImageResizeException: 'Σφάλμα κατά την αλλαγή μεγέθους της εικόνας. <pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Σύρετε τα αρχεία εδώ &hellip;',
         dropZoneClickTitle: '<br>(ή πατήστε για επιλογή {files})',
         fileActionSettings: {

js/locales/es.js

@@ -60,6 +60,13 @@
         msgImageHeightLarge: 'La altura de la imagen "{name}" no puede exceder de {size} px.',
         msgImageResizeError: 'No se pudieron obtener las dimensiones de la imagen para cambiar el tamaño.',
         msgImageResizeException: 'Error al cambiar el tamaño de la imagen.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Arrastre y suelte aquí los archivos &hellip;',
         dropZoneClickTitle: '<br>(o haga clic para seleccionar {files})',
         fileActionSettings: {

js/locales/fa.js

@@ -62,6 +62,13 @@
         msgImageHeightLarge: 'ارتفاع فایل تصویر "{name}" نمی‌تواند از {size} پیکسل بیشتر باشد.',
         msgImageResizeError: 'یافت نشد ابعاد تصویر را برای تغییر اندازه.',
         msgImageResizeException: 'خطا در هنگام تغییر اندازه تصویر.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'فایل‌ها را بکشید و در اینجا رها کنید &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/fi.js

@@ -51,6 +51,13 @@
         msgProgress: 'Ladataan tiedostoa {index} / {files} - {name} - {percent}% valmistunut.',
         msgSelected: '{n} tiedostoa valittu',
         msgFoldersNotAllowed: 'Raahaa ja pudota ainoastaan tiedostoja! Ohitettu {n} raahattua kansiota.',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Raahaa ja pudota tiedostot tähän …',
         dropZoneClickTitle: '<br>(tai valitse hiirellä {files})',
         fileActionSettings: {

js/locales/fr.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Hauteur de fichier image "{name}" ne peut pas dépasser {size} px.',
         msgImageResizeError: "Impossible d'obtenir les dimensions de l'image à redimensionner.",
         msgImageResizeException: "Erreur lors du redimensionnement de l'image.<pre>{errors}</pre>",
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Glissez et déposez les fichiers ici&hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/hu.js

@@ -60,6 +60,13 @@
         msgImageHeightLarge: 'A kép magassága "{name}" nem haladhatja meg a {size} pixelt.',
         msgImageResizeError: 'Nem lehet megállapítani a kép méreteit az átméretezéshez.',
         msgImageResizeException: 'Hiba történt a méretezés közben.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Fájlok húzása ide &hellip;',
         dropZoneClickTitle: '<br>(vagy kattintson ide a {files} tallózásához...)',
         fileActionSettings: {

js/locales/id.js

@@ -62,6 +62,13 @@
         msgImageHeightLarge: 'Tinggi dari gambar "{name}" tak boleh melebihi {size} px.',
         msgImageResizeError: 'Tak dapat menentukan dimensi gambar untuk mengubah ukuran.',
         msgImageResizeException: 'Kesalahan saat mengubah ukuran gambar.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Tarik dan lepaskan berkas disini &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/it.js

@@ -63,6 +63,13 @@
         msgImageHeightLarge: 'Altezza di file immagine "{name}" non può superare {size} px.',
         msgImageResizeError: "Impossibile ottenere le dimensioni dell'immagine per ridimensionare.",
         msgImageResizeException: "Errore durante il ridimensionamento dell'immagine.<pre>{errors}</pre>",
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Trascina i file qui&hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/ja.js

@@ -68,6 +68,13 @@
         msgImageHeightLarge: '画像ファイル"{name}"の高さがアップロード可能な画像サイズ({size}px)を超えています',
         msgImageResizeError: 'リサイズ時に画像サイズが取得できませんでした',
         msgImageResizeException: '画像のリサイズ時にエラーが発生しました。<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'ファイルをドラッグ&ドロップ&hellip;',
         dropZoneClickTitle: '<br>(または クリックして{files}を選択 )',
         slugCallback: function(text) {

js/locales/kr.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: '이미지 파일 "{name}"의 세로는 최대 {size} px를 넘을수 없습니다.',
         msgImageResizeError: '이미지의 사이즈를 재조정을 위한 이미지 사이즈를 가져올 수 없습니다.',
         msgImageResizeException: '이미지 사이즈 재조정이 다음 이유로 실패했습니다.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: '파일을 여기에 드래그인 드랍을 하십시요 &hellip;',
         dropZoneClickTitle: '<br>(또는 {files} 선택을 위해 클릭하십시요)',
         fileActionSettings: {

js/locales/kz.js

@@ -49,6 +49,13 @@
         msgImageHeightLarge: '"{name}" суреттің биіктігі {size} px. аспау керек',
         msgImageResizeError: 'Суреттің өлшемін өзгерту үшін, мөлшері алынбады',
         msgImageResizeException: 'Суреттің мөлшерлерін өзгерткен кезде қателік пайда болды.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Файлдарды осында сүйреу &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/nl.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Hoogte van het foto bestand "{name}" kan niet hoger zijn dan {size} px.',
         msgImageResizeError: 'Kon de foto afmetingen niet lezen om te verkleinen.',
         msgImageResizeException: 'Fout bij het verkleinen van de foto.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Drag & drop bestanden hier &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/pl.js

@@ -50,6 +50,13 @@
         msgImageHeightLarge: 'Wysokość pliku obrazu "{name}" nie może przekraczać {size} px.',
         msgImageResizeError: 'Nie udało się uzyskać wymiaru obrazu, aby zmienić rozmiar.',
         msgImageResizeException: 'Błąd podczas zmiany rozmiaru obrazu.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Przeciągnij i upuść pliki tutaj &hellip;',
         dropZoneClickTitle: '<br>(lub kliknij tutaj i wybierz {files} z komputera)',
         fileActionSettings: {

js/locales/pt-BR.js

@@ -60,6 +60,13 @@
         msgImageHeightLarge: 'Altura do arquivo de imagem "{name}" não pode exceder {size} px.',
         msgImageResizeError: 'Não foi possível obter as dimensões da imagem para redimensionar.',
         msgImageResizeException: 'Erro ao redimensionar a imagem.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Arraste e solte os arquivos aqui&hellip;',
         dropZoneClickTitle: '<br>(ou clique para selecionar o(s) arquivo(s))',
         fileActionSettings: {

js/locales/pt.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Altura do arquivo de imagem "{name}" não pode exceder {size} px.',
         msgImageResizeError: 'Could not get the image dimensions to resize.',
         msgImageResizeException: 'Erro ao redimensionar a imagem.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Arrastar e largar ficheiros aqui &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/ro.js

@@ -62,6 +62,13 @@
         msgImageHeightLarge: 'Înălțimea fișier imagine "{name}" nu poate depăși {size} px.',
         msgImageResizeError: 'Nu a putut obține dimensiunile imaginii pentru a redimensiona.',
         msgImageResizeException: 'Eroare la redimensionarea imaginii.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Trage fișierele aici &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/ru.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Высота изображения "{name}" не может превышать {size} px.',
         msgImageResizeError: 'Не удалось получить размеры изображения, чтобы изменить размер.',
         msgImageResizeException: 'Ошибка при изменении размера изображения.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Перетащите файлы сюда &hellip;',
         dropZoneClickTitle: '<br>(Или щёлкните, чтобы выбрать {files})',
         fileActionSettings: {

js/locales/sk.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Výška súboru obrazu "{name}" nesmie presiahnuť {size} px.',
         msgImageResizeError: 'Nemožno získať rozmery obrázku zmeniť veľkosť.',
         msgImageResizeException: 'Chyba pri zmene veľkosti obrázka.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Tiahni a pusť súbory tu &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/sl.js

@@ -59,6 +59,13 @@
         msgImageHeightLarge: 'Višina slike "{name}" ne sme preseči {size} px.',
         msgImageResizeError: 'Nisem mogel pridobiti dimenzij slike za spreminjanje velikosti.',
         msgImageResizeException: 'Napaka pri spreminjanju velikosti slike.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Povlecite in spustite datoteke sem &hellip;',
         dropZoneClickTitle: '<br>(ali kliknite sem za izbiro {files})',
         fileActionSettings: {

js/locales/th.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'ความสูงของไฟล์ภาพ "{name}" ไม่เกิน {size} พิกเซล.',
         msgImageResizeError: 'ไม่สามารถรับขนาดภาพเพื่อปรับขนาด',
         msgImageResizeException: 'ข้อผิดพลาดขณะปรับขนาดภาพ<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Drag & drop ไฟล์ตรงนี้ &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/tr.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: '"{name}" adlı görüntü dosyasının yüksekliği {size} pikseli geçemez.',
         msgImageResizeError: 'Görüntü boyutlarını yeniden boyutlandırmak için alınamadı.',
         msgImageResizeException: 'Görsel boyutlandırma sırasında hata.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Dosyaları buraya sürükleyip bırakın &hellip;',
         dropZoneClickTitle: '<br>(ya da {files} seçmek için tıklayınız)',
         fileActionSettings: {

js/locales/uk.js

@@ -62,6 +62,13 @@
         msgImageHeightLarge: 'Висота зображення "{name}" не може перевищувати {size} px.',
         msgImageResizeError: 'Не вдалося розміри зображення, щоб змінити розмір.',
         msgImageResizeException: 'Помилка при зміні розміру зображення.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Перетягніть файли сюди &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/vi.js

@@ -61,6 +61,13 @@
         msgImageHeightLarge: 'Chiều cao của hình ảnh "{name}" không được quá {size} px.',
         msgImageResizeError: 'Không lấy được kích thước của hình ảnh để resize.',
         msgImageResizeException: 'Resize hình ảnh bị lỗi.<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: 'Kéo thả tập tin vào đây &hellip;',
         dropZoneClickTitle: '<br>(hoặc click để chọn {files})',
         fileActionSettings: {

js/locales/zh-TW.js

@@ -63,6 +63,13 @@
         msgImageHeightLarge: '圖檔高度"{name}"不能超過{size}像素(px).',
         msgImageResizeError: '無法獲取的圖像尺寸調整。',
         msgImageResizeException: '錯誤而調整圖像大小。<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: '拖曳檔案至此 &hellip;',
         dropZoneClickTitle: '<br>(or click to select {files})',
         fileActionSettings: {

js/locales/zh.js

@@ -62,6 +62,13 @@
         msgImageHeightLarge: '图像文件"{name}"的高度不能超过{size}像素.',
         msgImageResizeError: '无法获取的图像尺寸调整。',
         msgImageResizeException: '错误而调整图像大小。<pre>{errors}</pre>',
+        msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!',
+        ajaxOperations: {
+            deleteThumb: 'file delete',
+            uploadThumb: 'single file upload',
+            uploadBatch: 'batch file upload',
+            uploadExtra: 'form data upload'
+        },
         dropZoneTitle: '拖拽文件到这里 &hellip;<br>支持多文件同时上传',
         dropZoneClickTitle: '<br>(或点击{files}按钮选择文件)',
         fileActionSettings: {

themes/explorer/theme.css

@@ -0,0 +1,148 @@
+/*!
+ * bootstrap-fileinput v4.3.7
+ * http://plugins.krajee.com/file-input
+ *
+ * Krajee Explorer theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD 3-Clause
+ * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
+ */
+.theme-explorer .file-preview .table {
+    margin: 0;
+}
+
+.theme-explorer .explorer-frame td {
+    vertical-align: middle;
+    text-align: left;
+}
+
+.theme-explorer .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;
+}
+
+.theme-explorer .file-preview-html {
+    display: inline-block;
+    border: 1px solid #ddd;
+    padding: 8px;
+    overflow: auto;
+}
+
+.theme-explorer .explorer-frame .file-preview-other {
+    text-align: center;
+}
+
+.theme-explorer .file-other-icon {
+    font-size: 4.2em;
+}
+
+.theme-explorer .explorer-frame .kv-file-content {
+    width: 80px;
+    height: 80px;
+    padding: 5px;
+    text-align: center;
+}
+
+.theme-explorer .file-actions-cell {
+    width: 100px;
+    padding: 0;
+}
+
+.theme-explorer .file-thumb-progress .progress {
+    display: block;
+    margin-top: 5px;
+}
+
+.theme-explorer .file-thumb-progress .progress, .theme-explorer .file-thumb-progress .progress-bar {
+    height: 13px;
+    font-size: 11px;
+    line-height: 13px;
+}
+
+.theme-explorer .file-actions-cell {
+    position: relative;
+}
+
+.theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle {
+    position: absolute;
+    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;
+}
+
+.theme-explorer .explorer-caption {
+    display: block;
+    color: #777;
+}
+
+.theme-explorer .file-actions {
+    text-align: center;
+}
+
+.theme-explorer .kvsortable-ghost {
+    opacity: 0.6;
+    background: #e1edf7;
+    border: 2px solid #a1abff;
+}
+
+@media only screen and (max-device-width: 500px) {
+    .theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle {
+        border-radius: 0;
+        border: 1px solid #8a6d3b;
+        margin-bottom: 5px;
+    }
+
+    .theme-explorer .explorer-caption {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 160px;
+        text-align: left;
+        color: #777;
+    }
+}
+
+.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;
+}

themes/explorer/theme.js

@@ -0,0 +1,59 @@
+/*!
+ * bootstrap-fileinput v4.3.7
+ * http://plugins.krajee.com/file-input
+ *
+ * Krajee Explorer theme configuration for bootstrap-fileinput. Load this theme file after loading `fileinput.js`.
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD 3-Clause
+ * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
+ */
+(function ($) {
+    "use strict";
+    var teTagBef = '<tr class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
+        ' data-template="{template}"', teContent = '<td class="kv-file-content">\n';
+    $.fn.fileinputThemes.explorer = {
+        layoutTemplates: {
+            preview: '<div class="file-preview {class}">\n' +
+            '    {close}' +
+            '    <div class="{dropClass}">\n' +
+            '    <table class="table table-bordered table-hover"><tbody class="file-preview-thumbnails">\n' +
+            '    </tbody></table>\n' +
+            '    <div class="clearfix"></div>' +
+            '    <div class="file-preview-status text-center text-success"></div>\n' +
+            '    <div class="kv-fileinput-error"></div>\n' +
+            '    </div>\n' +
+            '</div>',
+            footer: '<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> ' +
+            '{size}{progress}</td><td class="file-actions-cell">{actions}</td>',
+            actions: '<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
+            '{drag}\n' +
+            '<div class="file-actions">\n' +
+            '    <div class="file-footer-buttons">\n' +
+            '        {upload} {delete} {zoom} {other} ' +
+            '    </div>\n' +
+            '</div>',
+            zoomCache: '<tr style="display:none" class="kv-zoom-cache-theme"><td>' +
+            '<table class="kv-zoom-cache">{zoomContent}</table></td></tr>'
+        },
+        previewMarkupTags: {
+            tagBefore1: teTagBef + '>' + teContent,
+            tagBefore2: teTagBef + ' title="{caption}" style="width:{width};height:{height};">' + teContent,
+            tagAfter: '</td>\n{footer}</tr>\n'
+        },
+        previewSettings: {
+            image: {height: "60px"},
+            html: {width: "100px", height: "60px"},
+            text: {width: "100px", height: "60px"},
+            video: {width: "auto"},
+            audio: {width: "auto"},
+            flash: {width: "100px", height: "60px"},
+            object: {width: "100%", height: "60px"},
+            pdf: {width: "100px", height: "60px"},
+            other: {width: "100%", height: "60px"}
+        },
+        frameClass: 'explorer-frame'
+    };
+})(window.jQuery);