Demonstration on usage of various plugin methods to manipulate the fileinput plugin. This example also shows usage of a few plugin events before and after a REFRESH method. TIP: To test destruction and recreation - try using the Browse button to select a file. Then click DESTROY. You will see the destroyed plugin and a native fileinput which will still have the file(s) selected. Clicking RECREATE will revive back the plugin along with the file(s) selected.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
<div class="file-loading"> <input id="file-4" name="file-4[]" type="file" multiple> </div> <hr> <button class="btn btn-secondary btn-disable" type="button">Disable</button> <button class="btn btn-danger btn-destroy" type="button">Destroy</button> <button class="btn btn-success btn-recreate" type="button">Recreate</button> <button class="btn btn-info btn-refresh" type="button">Refresh</button> <button class="btn btn-outline-secondary btn-clear" type="button">Clear</button> <script> $(document).ready(function() { // the file input var $el4 = $('#file-4'), initPlugin = function() { $el4.fileinput({previewClass:''}); }; // initialize plugin initPlugin(); // `disable` and `enable` methods $(".btn-disable").on('click', function() { var $btn = $(this); if (!$el4.data('fileinput')) { initPlugin(); } if ($el4.attr('disabled')) { $el4.fileinput('enable'); $btn.html('Disable').removeClass('btn-primary').addClass('btn-secondary'); } else { $el4.fileinput('disable'); $btn.html('Enable').removeClass('btn-secondary').addClass('btn-primary'); } }); // `destroy` method $(".btn-destroy").on('click', function() { if ($el4.data('fileinput')) { $el4.fileinput('destroy'); } }); // recreate plugin after destroy $(".btn-recreate").on('click', function() { if ($el4.data('fileinput')) { return; } initPlugin(); }); // refresh plugin with new options $(".btn-refresh").on('click', function() { if (!$el4.data('fileinput')) { // just normal init when plugin is not initialized $el4.fileinput({previewClass:'bg-info'}); } else { // refresh already initialized plugin with new options $el4.fileinput('refresh', {previewClass:'bg-info'}); } }); // clear/reset the file input $(".btn-clear").on('click', function() { $el4.fileinput('clear'); }); }); </script>
filebeforedelete
event. It also mentions an example of how you can use methods like getFilesCount
to return the total files selected. <div class="file-loading"> <input id="file-5" name="file-5[]" type="file" multiple> </div> <script> $(document).ready(function() { var krajeeGetCount = function(id) { var cnt = $('#' + id).fileinput('getFilesCount'); return cnt === 0 ? 'You have no files remaining.' : 'You have ' + cnt + ' file' + (cnt > 1 ? 's' : '') + ' remaining.'; }; $('#file-5').fileinput({ overwriteInitial: false, validateInitialCount: true, initialPreview: [ "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/260/1920/1080'>", "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/261/1920/1080'>", ], initialPreviewConfig: [ {caption: "Nature-1.jpg", width: "120px", url: "/site/file-delete", key: 1}, {caption: "Nature-2.jpg", width: "120px", url: "/site/file-delete", key: 2} ], }).on('filebeforedelete', function() { var aborted = !window.confirm('Are you sure you want to delete this file?'); if (aborted) { window.alert('File deletion was aborted! ' + krajeeGetCount('file-5')); }; return aborted; }).on('filedeleted', function() { setTimeout(function() { window.alert('File deletion was successful! ' + krajeeGetCount('file-5')); }, 900); }); }); </script>
filebeforedelete
event must return a promise object as shown. <!-- load the third party plugin assets (jquery-confirm) --> <link href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet" type="text/css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <div class="file-loading"> <input id="file-6" name="file-6[]" type="file" multiple> </div> <script> $(document).ready(function() { var krajeeGetCount = function(id) { var cnt = $('#' + id).fileinput('getFilesCount'); return cnt === 0 ? 'You have no files remaining.' : 'You have ' + cnt + ' file' + (cnt > 1 ? 's' : '') + ' remaining.'; }; $('#file-6').fileinput({ overwriteInitial: false, validateInitialCount: true, initialPreview: [ "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/1038/1920/1080'>", "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/1039/1920/1080'>", ], initialPreviewConfig: [ {caption: "Nature-1.jpg", width: "120px", url: "/site/file-delete", key: 1}, {caption: "Cats-2.jpg", width: "120px", url: "/site/file-delete", key: 2} ], }).on('filebeforedelete', function() { return new Promise(function(resolve, reject) { $.confirm({ title: 'Confirmation!', content: 'Are you sure you want to delete this file?', type: 'red', buttons: { ok: { btnClass: 'btn-primary text-white', keys: ['enter'], action: function(){ resolve(); } }, cancel: function(){ $.alert('File deletion was aborted! ' + krajeeGetCount('file-6')); } } }); }); }).on('filedeleted', function() { setTimeout(function() { $.alert('File deletion was successful! ' + krajeeGetCount('file-6')); }, 900); }); }); </script>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.