Fix #1718: Enhancements for Bootstrap 5.x & New Theme

CHANGE.md

@@ -3,8 +3,13 @@ Change Log: `bootstrap-fileinput`
 
 ## version 5.2.2
 
-**Date**: _under development_
+**Date**: 19-Jun-2021
 
+- (enh #1718): Enhancements for Bootstrap 5.x & New Theme
+    - Default to use bootstrap 5.x icons instead of glyphicons
+    - Correct `layoutTemplates.main2` to use wrapper container for the buttons to use `mainClass`
+    - Create a new theme `bs5` to support bootstrap 5.x icons and styles
+    - This is a BC breaking change - which will remove GLYPHICONS as default icons and replace them with Bootstrap 5.x Icon Library. Users must load the Bootstrap icons CSS on their pages for this new change to take effect (as mentioned in docs).
 - (enh #1716): Update Czech Translations.
 - (enh #1715): Update Slovak Translations.
 - (enh #1714): Various enhancements to file caption styling and file preview processing.

README.md

@@ -20,7 +20,7 @@
 
 An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with file preview for various files, offers multiple selection, resumable chunk uploads, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap 5.x, 4.x, and 3.x CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files. 
 
-> NEW: Bootstrap 5.x support is added from v5.2.0 (major release after v5.1.5) of the plugin. With v5.2.0, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality. Note that as of May 2021, for Bootstrap 5.x library, there [is a modal dialog initialization issue recorded](https://github.com/twbs/bootstrap/issues/33840#issuecomment-833462016). This may in some cases break BC - so the version to rollback to is v5.1.5. However one should be able use release v5.2.0 without glitches if the right bootstrap Javascript library is loaded. Also check the `$.fn.fileinputBsVersion` setting for advanced use cases to avoid Bootstrap version detection issues.
+> NEW: Bootstrap 5.x support is added from v5.2.0 (major release after v5.1.5) of the plugin. With v5.2.0, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if the bootstrap library JS file is loaded). Alternatively, check the `$.fn.fileinputBsVersion` setting for advanced use cases to avoid Bootstrap version detection issues.
 
 > NOTE: Version 5.x is a significant rewrite. With version 5.x, the plugin code has been revamped with enhanced file management, resumable chunk uploads support, and other new features. You can go through the various closed enhancements and features and documented for [Release 5.x milestone](https://github.com/kartik-v/bootstrap-fileinput/milestone/1?closed=1).   
 
@@ -76,33 +76,47 @@ You can also manually install the plugin easily to your project. Just download t
 
 ## Usage
 
-Step 1: Load the following assets in your header. 
+Step 1: Load the following assets on your page in the order mentioned. 
 
 ```html
-<!-- bootstrap 5.x and 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
+<!-- bootstrap 5.x or 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
+
+<!-- default icons used in the plugin are from Bootstrap 5.x icon library (which can be enabled by loading CSS below) -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
+
+<!-- alternatively you can use the font awesome icon library if using with `fas` theme (or Bootstrap 4.x) by uncommenting below. -->
+<!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous" -->
+
+<!-- the fileinput plugin styling CSS file -->
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/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="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-<!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you 
+<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
+
+<!-- the jQuery Library -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
+
+<!-- piexif.min.js is needed for auto orienting image files OR when 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="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/piexif.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/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="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/sortable.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://cdn.jsdelivr.net/npm/[email protected]/dist/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 5.x and 4.x is supported. You can also use the 3.3.x versions. -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" type="text/javascript"></script>
-<!-- the main fileinput plugin file -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/fileinput.min.js"></script>
-<!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/themes/fa/theme.js"></script>
-<!-- optionally if you need translation for your language then include  locale file as mentioned below (replace LANG.js with your locale file) -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/locales/LANG.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/sortable.min.js" type="text/javascript"></script>
+
+<!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
+    dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+
+<!-- the main fileinput plugin script JS file -->
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/fileinput.min.js"></script>
+
+<!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`). Uncomment if needed. -->
+<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/themes/fas/theme.min.js"></script -->
+
+<!-- optionally if you need translation for your language then include the locale file as mentioned below (replace LANG.js with your language locale) -->
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/locales/LANG.js"></script>
 ```
 With v5.2.1, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if you have loaded the bootstrap.min.js before fileinput.min.js). In case of any issues - you can explicitly set the bootstrap version by setting the following variable before the plugin initialization script.
 
@@ -122,22 +136,31 @@ For ease of access, the sources for the above plugins are included in the `js/pl
 
 Step 2: Initialize the plugin on your page. For example,
 
-```js
-// initialize with defaults
-$("#input-id").fileinput();
-
-// with plugin options
-$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
+```html
+// HTML markup
+<input id="input-id" name="file-data" type="file">
+
+<script>
+$(document).ready(function() {
+    // initialize with defaults
+    $("#input-id").fileinput();
+
+    // with plugin options
+    $("#input-id").fileinput({'uploadUrl': '/path/to/your-upload-api', 'previewFileType': 'any'});
+});
+</script>
 ```
 
 The `#input-id` is the identifier for the input (e.g. `type = file`) on your page, which is hidden automatically by the plugin. 
 
-Alternatively, you can directly call the plugin options by setting data attributes to your input field.
+Alternatively, you can directly call the plugin options by setting data attributes to your input field. To auto initialize the plugin with just HTML markup - add the CSS class `file` to your file input markup element. 
 
 ```html
 <input id="input-id" type="file" class="file" data-preview-file-type="text" >
 ```
 
+**NOTE:** When initializing the plugin via javascript (as mentioned earlier), do not add the CSS class `file` to the input markup (else you would get an erronaeous / inconsistent output).
+
 ## Contributors
 
 ### Code Contributors

examples/index-bs3.html

@@ -7,18 +7,22 @@
     <title>Krajee JQuery Plugins - &copy; Kartik</title>
     
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
     <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
     <link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
     <script src="../js/plugins/piexif.js" type="text/javascript"></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/gly/theme.js" type="text/javascript"></script>
     <script src="../themes/fas/theme.js" type="text/javascript"></script>
     <script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>
+    <script>$.fn.fileinput.defaults.theme = 'gly';</script>
+
 </head>
 <body>
 <div class="container my-4">
@@ -49,7 +53,7 @@
     <form enctype="multipart/form-data">
         <label for="file-0b">Test invalid input type</label>
         <div class="file-loading">
-            <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1" data-theme="fas">
+            <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
         </div>
         <script>
             $(document).on('ready', function () {
@@ -60,12 +64,12 @@
     <hr>
     <form enctype="multipart/form-data">
         <div class="file-loading">
-            <input id="file-0c" class="file" type="file" multiple data-min-file-count="3" data-theme="fas">
+            <input id="file-0c" class="file" type="file" multiple data-min-file-count="3" data-theme="gly">
         </div>
         <hr>
         <div class="form-group">
             <div class="file-loading">
-                <input id="file-0d" class="file" type="file" data-theme="fas">
+                <input id="file-0d" class="file" type="file">
             </div>
         </div>
         <hr>

examples/index-bs4.html

@@ -7,6 +7,7 @@
     <title>Krajee JQuery Plugins - &copy; Kartik</title>
     
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
     <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
     <link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>

examples/index-bs5.html

@@ -6,7 +6,8 @@
     <meta charset="UTF-8"/>
     <title>Krajee JQuery Plugins - Bootstrap 5.x - &copy; Kartik</title>
     
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
     <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
     <link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
@@ -16,7 +17,7 @@
 </head>
 <body>
 <div class="container my-4">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/js/bootstrap.bundle.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></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>

js/fileinput.js

@@ -84,7 +84,7 @@
         },
         objUrl: window.URL || window.webkitURL,
         isBs: function (ver) {
-            var chk = ($.fn.fileinputBsVersion || '') + '';
+            var chk = $.trim(($.fn.fileinputBsVersion || '')  + '');
             ver = parseInt(ver, 10);
             if (!chk) {
                 return ver === 4;
@@ -1690,7 +1690,7 @@
                 '  </div>'
                 '</div>';
             tMain2 = '{preview}\n<div class="kv-upload-progress kv-hidden"></div>\n<div class="clearfix"></div>\n' +
-                '{remove}\n{cancel}\n{upload}\n{browse}\n';
+                '<span class="{class}">{remove}\n{cancel}\n{upload}\n{browse}\n</span>';
             tPreview = '<div class="file-preview {class}">\n' +
                 '  {close}' +
                 '  <div class="{dropClass} clearfix">\n' +
@@ -1701,7 +1701,7 @@
                 '  </div>\n' +
                 '</div>';
             tClose = $h.closeButton('fileinput-remove');
-            tFileIcon = '<i class="glyphicon glyphicon-file"></i>';
+            tFileIcon = '<i class="bi-file-earmark-fill"></i>';
             // noinspection HtmlUnknownAttribute
             tCaption = '<input readonly class="file-caption-name form-control {class}">\n';
             //noinspection HtmlUnknownAttribute
@@ -1733,7 +1733,7 @@
                 '        {status}\n' +
                 '     </div>\n' +
                 '</div>{stats}';
-            tStats = '<div class="text-info file-upload-stats">' +
+            tStats = '<div class="text-primary file-upload-stats">' +
                 '<span class="pending-time">{pendingTime}</span> ' +
                 '<span class="upload-speed">{uploadSpeed}</span>' +
                 '</div>';
@@ -1931,30 +1931,30 @@
                     showDownload: true,
                     showZoom: true,
                     showDrag: true,
-                    removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
+                    removeIcon: '<i class="bi-trash"></i>',
                     removeClass: defBtnCss1,
                     removeErrorClass: 'btn btn-sm btn-kv btn-danger',
                     removeTitle: 'Remove file',
-                    uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
+                    uploadIcon: '<i class="bi-upload"></i>',
                     uploadClass: defBtnCss1,
                     uploadTitle: 'Upload file',
-                    uploadRetryIcon: '<i class="glyphicon glyphicon-repeat"></i>',
+                    uploadRetryIcon: '<i class="bi-arrow-clockwise"></i>',
                     uploadRetryTitle: 'Retry upload',
-                    downloadIcon: '<i class="glyphicon glyphicon-download"></i>',
+                    downloadIcon: '<i class="bi-download"></i>',
                     downloadClass: defBtnCss1,
                     downloadTitle: 'Download file',
-                    zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',
+                    zoomIcon: '<i class="bi-zoom-in"></i>',
                     zoomClass: defBtnCss1,
                     zoomTitle: 'View Details',
-                    dragIcon: '<i class="glyphicon glyphicon-move"></i>',
-                    dragClass: 'text-info',
+                    dragIcon: '<i class="bi-arrows-move"></i>',
+                    dragClass: 'text-primary',
                     dragTitle: 'Move / Rearrange',
                     dragSettings: {},
-                    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>',
-                    indicatorPaused: '<i class="glyphicon glyphicon-pause text-primary"></i>',
+                    indicatorNew: '<i class="bi-plus-lg text-warning"></i>',
+                    indicatorSuccess: '<i class="bi-check-lg text-success"></i>',
+                    indicatorError: '<i class="bi-exclamation-lg text-danger"></i>',
+                    indicatorLoading: '<i class="bi-hourglass-bottom text-muted"></i>',
+                    indicatorPaused: '<i class="bi-pause-fill text-primary"></i>',
                     indicatorNewTitle: 'Not uploaded yet',
                     indicatorSuccessTitle: 'Uploaded',
                     indicatorErrorTitle: 'Upload Error',
@@ -4269,7 +4269,7 @@
             }
             n = self.isAjaxUpload ? self.fileManager.count() : numFiles;
             nFiles = self.previewCache.count(true) + n;
-            log = n === 1 ? label : self._getMsgSelected(nFiles, true);
+            log = n === 1 ? label : self._getMsgSelected(nFiles, !self.isAjaxUpload && !self.isError);
             if (self.isError) {
                 self.$previewContainer.removeClass('file-thumb-loading');
                 self._initCapStatus();
@@ -5940,12 +5940,12 @@
             return $container.html();
         },
         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>'
+            prev: '<i class="bi-caret-left-fill"></i>',
+            next: '<i class="bi-caret-right-fill"></i>',
+            toggleheader: '<i class="bi-arrows-expand"></i>',
+            fullscreen: '<i class="bi-arrows-fullscreen"></i>',
+            borderless: '<i class="bi-arrows-angle-expand"></i>',
+            close: '<i class="bi-x-lg"></i>'
         },
         previewZoomButtonClasses: {
             prev: 'btn btn-navigate',
@@ -5970,20 +5970,20 @@
         defaultPreviewContent: null,
         customLayoutTags: {},
         customPreviewTags: {},
-        previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
+        previewFileIcon: '<i class="bi-file-earmark-fill"></i>',
         previewFileIconClass: 'file-other-icon',
         previewFileIconSettings: {},
         previewFileExtSettings: {},
         buttonLabelClass: 'hidden-xs',
-        browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',
+        browseIcon: '<i class="bi-folder2-open"></i> ',
         browseClass: 'btn btn-primary',
-        removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
+        removeIcon: '<i class="bi-trash"></i>',
         removeClass: defBtnCss2,
-        cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
+        cancelIcon: '<i class="bi-slash-circle"></i>',
         cancelClass: defBtnCss2,
-        pauseIcon: '<i class="glyphicon glyphicon-pause"></i>',
+        pauseIcon: '<i class="bi-pause-fill"></i>',
         pauseClass: defBtnCss2,
-        uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
+        uploadIcon: '<i class="bi-upload"></i>',
         uploadClass: defBtnCss2,
         uploadUrl: null,
         uploadUrlThumb: null,
@@ -6037,7 +6037,7 @@
         maxTotalFileCount: 0,
         validateInitialCount: false,
         msgValidationErrorClass: 'text-danger',
-        msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> ',
+        msgValidationErrorIcon: '<i class="bi-exclamation-circle-fill"></i> ',
         msgErrorClass: 'file-error-message',
         progressThumbClass: 'progress-bar progress-bar-striped active progress-bar-animated',
         progressClass: 'progress-bar bg-success progress-bar-success progress-bar-striped active progress-bar-animated',

themes/bs5/theme.js

@@ -0,0 +1,50 @@
+/*!
+ * bootstrap-fileinput v5.2.2
+ * http://plugins.krajee.com/file-input
+ *
+ * Bootstrap 5.x icon theme configuration for bootstrap-fileinput. Requires bootstrap 5.x icons CSS to be loaded.
+ * This is used as the default theme within the bootstrap-fileinput plugin.
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2014 - 2021, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD-3-Clause
+ * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
+ */
+(function ($) {
+    'use strict';
+    $.fn.fileinputBsVersion = '5.x.x';
+    $.fn.fileinputThemes.bs5 = {
+        fileActionSettings: {
+            removeIcon: '<i class="bi-trash"></i>',
+            uploadIcon: '<i class="bi-upload"></i>',
+            uploadRetryIcon: '<i class="bi-arrow-clockwise"></i>',
+            downloadIcon: '<i class="bi-download"></i>',
+            zoomIcon: '<i class="bi-zoom-in"></i>',
+            dragIcon: '<i class="bi-arrows-move"></i>',
+            indicatorNew: '<i class="bi-plus-lg text-warning"></i>',
+            indicatorSuccess: '<i class="bi-check-lg-fill text-success"></i>',
+            indicatorError: '<i class="bi-exclamation-lg text-danger"></i>',
+            indicatorLoading: '<i class="bi-hourglass-bottom text-muted"></i>',
+            indicatorPaused: '<i class="bi-pause-fill text-primary"></i>',
+        },
+        layoutTemplates: {
+            fileIcon: '<i class="bi-file-earmark-fill kv-caption-icon"></i>'
+        },
+        previewZoomButtonIcons: {
+            prev: '<i class="bi-caret-left-fill"></i>',
+            next: '<i class="bi-caret-right-fill"></i>',
+            toggleheader: '<i class="bi-arrows-expand"></i>',
+            fullscreen: '<i class="bi-arrows-fullscreen"></i>',
+            borderless: '<i class="bi-arrows-angle-expand"></i>',
+            close: '<i class="bi-x-lg"></i>'
+        },
+        previewFileIcon: '<i class="bi-file-earmark-fill"></i>',
+        browseIcon: '<i class="bi-folder2-open"></i> ',
+        removeIcon: '<i class="bi-trash"></i>',
+        cancelIcon: '<i class="bi-slash-circle"></i>',
+        pauseIcon: '<i class="bi-pause-fill"></i>',
+        uploadIcon: '<i class="bi-upload"></i>',
+        msgValidationErrorIcon: '<i class="bi-exclamation-circle-fill"></i> '
+    };
+})(window.jQuery);

themes/bs5/theme.min.js

@@ -0,0 +1,13 @@
+/*!
+ * bootstrap-fileinput v5.2.2
+ * http://plugins.krajee.com/file-input
+ *
+ * Bootstrap 5.x icon theme configuration for bootstrap-fileinput. Requires bootstrap 5.x icons CSS to be loaded.
+ * This is used as the default theme within the bootstrap-fileinput plugin.
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2014 - 2021, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD-3-Clause
+ * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
+ */!function(i){"use strict";i.fn.fileinputBsVersion="5.x.x",i.fn.fileinputThemes.bs5={fileActionSettings:{removeIcon:'<i class="bi-trash"></i>',uploadIcon:'<i class="bi-upload"></i>',uploadRetryIcon:'<i class="bi-arrow-clockwise"></i>',downloadIcon:'<i class="bi-download"></i>',zoomIcon:'<i class="bi-zoom-in"></i>',dragIcon:'<i class="bi-arrows-move"></i>',indicatorNew:'<i class="bi-plus-lg text-warning"></i>',indicatorSuccess:'<i class="bi-check-lg-fill text-success"></i>',indicatorError:'<i class="bi-exclamation-lg text-danger"></i>',indicatorLoading:'<i class="bi-hourglass-bottom text-muted"></i>',indicatorPaused:'<i class="bi-pause-fill text-primary"></i>'},layoutTemplates:{fileIcon:'<i class="bi-file-earmark-fill kv-caption-icon"></i>'},previewZoomButtonIcons:{prev:'<i class="bi-caret-left-fill"></i>',next:'<i class="bi-caret-right-fill"></i>',toggleheader:'<i class="bi-arrows-expand"></i>',fullscreen:'<i class="bi-arrows-fullscreen"></i>',borderless:'<i class="bi-arrows-angle-expand"></i>',close:'<i class="bi-x-lg"></i>'},previewFileIcon:'<i class="bi-file-earmark-fill"></i>',browseIcon:'<i class="bi-folder2-open"></i> ',removeIcon:'<i class="bi-trash"></i>',cancelIcon:'<i class="bi-slash-circle"></i>',pauseIcon:'<i class="bi-pause-fill"></i>',uploadIcon:'<i class="bi-upload"></i>',msgValidationErrorIcon:'<i class="bi-exclamation-circle-fill"></i> '}}(window.jQuery);