Updates to release v5.5.0 fixes #1791 fixes #1795 fixes #1796

CHANGE.md

@@ -1,7 +1,9 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
-## version 5.2.9
+## version 5.5.0
+
+**Major Release: BC Breaking**
 
 **Date**: 19-Jun-2022
 
@@ -17,12 +19,13 @@ Change Log: `bootstrap-fileinput`
    - Load the following new plugin files before fileinput.min.js
 ```html
 <!-- buffer.min.js and filetype.min.js are necessary in the order listed for advanced mime type parsing and more correct
-     preview. This is a feature available since v5.2.9 and is needed if you want to ensure file mime type is parsed 
+     preview. This is a feature available since v5.5.0 and is needed if you want to ensure file mime type is parsed 
      correctly even if the local file's extension is named incorrectly. This will ensure more correct preview of the
      selected file (note: this will involve a small processing overhead in scanning of file contents locally). -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.9/js/plugins/buffer.min.js" type="text/javascript"></script>
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.9/js/plugins/filetype.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/buffer.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/filetype.min.js" type="text/javascript"></script>
 ```   
+- (enh #1791): Enhance preview update automatically when `addToStack` is called.
 - (enh #1785): Image rotation button action feature in thumbnail and zoom.
   - New property `rotatableFileExtensions` defaults to ['jpg', 'jpeg', 'png', 'gif'], 
   - New properties in `fileActionSettings` (`rotateIcon`, `rotateTitle`, `rotateClass`)

README.md

@@ -92,41 +92,43 @@ Step 1: Load the following assets on your page in the order mentioned.
 <!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous" -->
 
 <!-- the fileinput plugin styling CSS file -->
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/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/bootstrap-fileinput@5.2.9/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
+<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/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>
 
 <!-- buffer.min.js and filetype.min.js are necessary in the order listed for advanced mime type parsing and more correct
-     preview. This is a feature available since v5.2.9 and is needed if you want to ensure file mime type is parsed 
+     preview. This is a feature available since v5.5.0 and is needed if you want to ensure file mime type is parsed 
      correctly even if the local file's extension is named incorrectly. This will ensure more correct preview of the
-     selected file (note: this will involve a small processing overhead in scanning of file contents locally). -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/buffer.min.js" type="text/javascript"></script>
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/filetype.min.js" type="text/javascript"></script>
+     selected file (note: this will involve a small processing overhead in scanning of file contents locally). If you 
+     do not load these scripts then the mime type parsing will largely be derived using the extension in the filename
+     and some basic file content parsing signatures. -->
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/buffer.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/filetype.min.js" type="text/javascript"></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/bootstrap-fileinput@5.2.9/js/plugins/piexif.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/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/bootstrap-fileinput@5.2.9/js/plugins/sortable.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/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/bootstrap-fileinput@5.2.9/js/fileinput.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/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/bootstrap-fileinput@5.2.9/themes/fas/theme.min.js"></script -->
+<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/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/bootstrap-fileinput@5.2.9/js/locales/LANG.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/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.
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-fileinput",
-  "version": "5.2.9",
+  "version": "5.5.0",
   "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
   "authors": [
     "Kartik Visweswaran <[email protected]>"

css/fileinput-rtl.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v5.2.9
+ * bootstrap-fileinput v5.5.0
  * http://plugins.krajee.com/file-input
  *
  * Krajee RTL (Right To Left) default styling for bootstrap-fileinput.

css/fileinput.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v5.2.9
+ * bootstrap-fileinput v5.5.0
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.

examples/index-bs3.html

@@ -1,5 +1,5 @@
 <!--
-* bootstrap-fileinput v5.2.9
+* bootstrap-fileinput v5.5.0
 * http://plugins.krajee.com/file-input
 *
 * Author: Kartik Visweswaran
@@ -21,6 +21,8 @@
     <link href="../themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
+    <script src="../js/plugins/buffer.min.js" type="text/javascript"></script>
+    <script src="../js/plugins/filetype.min.js" type="text/javascript"></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>
@@ -142,6 +144,13 @@ <h4>Multi Language Inputs</h4>
             </div>
     </form>
     <hr>
+    <h4>Test <code>addToStack</code></h4>
+    <label>Select file below which will automatically be added to the plugin preview later</label>
+    <div class="input-group mb-3">
+        <input type="file" class="form-control" id="inp-add-1">
+    </div>
+    <hr>
+    <input type="file" id="inp-add-2" name="inp-add-2" multiple>
     <br>
 </div>
 </body>
@@ -252,6 +261,25 @@ <h4>Multi Language Inputs</h4>
          alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
          });
          */
+        $('#inp-add-1').on('change', function() {
+            var $plugin = $('#inp-add-2').data('fileinput');
+            $plugin.addToStack($(this)[0].files[0])
+        });
+        $('#inp-add-2').fileinput({
+            uploadUrl: '#',
+            //uploadUrl: 'http://localhost/plugins/test-upload',
+            initialPreviewAsData: true,
+            initialPreview: [
+                "https://dummyimage.com/640x360/a0f.png&text=Transport+1",
+                "https://dummyimage.com/640x360/3a8.png&text=Transport+2",
+                "https://dummyimage.com/640x360/6ff.png&text=Transport+3"
+            ],
+            initialPreviewConfig: [
+                {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1, zoomData: 'https://dummyimage.com/1920x1080/a0f.png&text=Transport+1', description: '<h5>NUMBER 1</h5> The first choice for transport. This is the future.'},
+                {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2, zoomData: 'https://dummyimage.com/1920x1080/3a8.png&text=Transport+2', description: '<h5>NUMBER 2</h5> The second choice for transport. This is the future.'},
+                {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3, zoomData: 'https://dummyimage.com/1920x1080/6ff.png&text=Transport+3', description: '<h5>NUMBER 3</h5> The third choice for transport. This is the future.'}
+            ]
+        });
     });
 </script>
 </html>

examples/index-bs4.html

@@ -1,5 +1,5 @@
 <!--
-* bootstrap-fileinput v5.2.9
+* bootstrap-fileinput v5.5.0
 * http://plugins.krajee.com/file-input
 *
 * Author: Kartik Visweswaran
@@ -21,6 +21,8 @@
     <link href="../themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+    <script src="../js/plugins/buffer.min.js" type="text/javascript"></script>
+    <script src="../js/plugins/filetype.min.js" type="text/javascript"></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>
@@ -139,6 +141,13 @@ <h4>Multi Language Inputs</h4>
             </div>
     </form>
     <hr>
+    <h4>Test <code>addToStack</code></h4>
+    <label>Select file below which will automatically be added to the plugin preview later</label>
+    <div class="input-group mb-3">
+        <input type="file" class="form-control" id="inp-add-1">
+    </div>
+    <hr>
+    <input type="file" id="inp-add-2" name="inp-add-2" multiple>
     <br>
 </div>
 </body>
@@ -249,6 +258,25 @@ <h4>Multi Language Inputs</h4>
          alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
          });
          */
+        $('#inp-add-1').on('change', function() {
+            var $plugin = $('#inp-add-2').data('fileinput');
+            $plugin.addToStack($(this)[0].files[0])
+        });
+        $('#inp-add-2').fileinput({
+            uploadUrl: '#',
+            //uploadUrl: 'http://localhost/plugins/test-upload',
+            initialPreviewAsData: true,
+            initialPreview: [
+                "https://dummyimage.com/640x360/a0f.png&text=Transport+1",
+                "https://dummyimage.com/640x360/3a8.png&text=Transport+2",
+                "https://dummyimage.com/640x360/6ff.png&text=Transport+3"
+            ],
+            initialPreviewConfig: [
+                {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1, zoomData: 'https://dummyimage.com/1920x1080/a0f.png&text=Transport+1', description: '<h5>NUMBER 1</h5> The first choice for transport. This is the future.'},
+                {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2, zoomData: 'https://dummyimage.com/1920x1080/3a8.png&text=Transport+2', description: '<h5>NUMBER 2</h5> The second choice for transport. This is the future.'},
+                {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3, zoomData: 'https://dummyimage.com/1920x1080/6ff.png&text=Transport+3', description: '<h5>NUMBER 3</h5> The third choice for transport. This is the future.'}
+            ]
+        });
     });
 </script>
 </html>