Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

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.

Tip

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)

Manipulate the file plugin using various built in methods.

<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>
<script>
$(document).on('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();
           $el4.trigger('change');
        }
        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();
        if ($el4.val()) {
            $el4.trigger('change');
        }
    });

    // refresh plugin with new options 
    $(".btn-refresh").on('click', function() {
        $el4.fileinput('refresh', {previewClass:'bg-info'});
        if ($el4.val()) {
            $el4.trigger('change');
        }
    });
});
</script>
Delete validation of inital preview file thumbnails. This example demonstrates how one can show a confirmation dialog before deleting using the 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).on('ready', function() {
    var $el5 = $('#file-5'), krajeeGetCount = function() {
        var cnt = $el5.fileinput('getFilesCount');
        return cnt === 0 ? 'You have no files remaining.' :
            'You have ' +  cnt + ' file' + (cnt > 1 ? 's' : '') + ' remaining.';
    };
    $el5.fileinput({
        overwriteInitial: false,
        validateInitialCount: true,
        initialPreview: [
            "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/1'>",
            "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/2'>",
        ],
        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());
        };
        return aborted;
    }).on('filedeleted', function() {
        setTimeout(function() {
            window.alert('File deletion was successful! ' + krajeeGetCount());
        }, 900);
    });
});
</script>
A more advanced variation of delete validation 1 scenario where a third party JS plugin like bootstrap-dialog is used to render the confirmation prompt. In this case the filebeforedelete event must return a promise object as shown.
<!-- load the third party plugin assets (bootstrap-dialog) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>

<div class="file-loading">
    <input id="file-6" name="file-6[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    var $el6 = $('#file-6'), krajeeGetCount = function() {
        var cnt = $el6.fileinput('getFilesCount');
        return cnt === 0 ? 'You have no files remaining.' :
            'You have ' +  cnt + ' file' + (cnt > 1 ? 's' : '') + ' remaining.';
    };
    $el6.fileinput({
        overwriteInitial: false,
        validateInitialCount: true,
        initialPreview: [
            "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/cats/1'>",
            "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/cats/2'>",
        ],
        initialPreviewConfig: [
            {caption: "Cats-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) {
            BootstrapDialog.confirm({
                title: 'Confirmation',
                type: BootstrapDialog.TYPE_WARNING, 
                message: 'Are you sure you want to delete this file?', 
                callback: function(result) {
                    var aborted = !result;
                    if (aborted) {
                        BootstrapDialog.alert('File deletion was aborted! ' + krajeeGetCount());
                        reject(aborted);
                    } else {
                        resolve(aborted);
                    }
                }
            });
        });
    }).on('filedeleted', function() {
        setTimeout(function() {
            BootstrapDialog.alert('File deletion was successful! ' + krajeeGetCount());
        }, 900);
    });
});
</script>

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.