Krajee

Plugin Methods Demo

Thankful to Krajee! BUY A COFFEEor 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>
<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>
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).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>
A more advanced variation of delete validation 1 scenario where a third party JS plugin like jquery-confirm 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 (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>

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.

 
visitors to Krajee Jquery Plugins since 22-May-2017