Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Validations before deleting files. Use filepredelete event to do your validations and return an abort status as mentioned in the event manipulation documentation. For example raise a confirmation dialog for delete. Return true (or any valid value/object other than false or null or empty string) if you wish to abort the delete process. You can do further operations if you want on this by trapping the filecustomerror event. Your filecustomerror event, can receive data that you return from these other events.

Note

For these demo scenarios, the server code actually does not store / upload the files on the server and returns a dummy set of images for testing.

Code

<div class="file-loading">
    <input id="input-707" name="kartik-input-707[]" type="file" multiple>
</div>

<script>
$(document).on("ready", function() {
    $("#input-707").fileinput({
        uploadUrl: "/file-upload-batch/1",
        uploadAsync: false,
        minFileCount: 2,
        maxFileCount: 5,
        overwriteInitial: false,
        initialPreview: [
            "<img class='file-preview-image kv-preview-data' src='http://lorempixel.com/800/460/nature/1'>",
            "<img class='file-preview-image kv-preview-data' src='http://lorempixel.com/800/460/nature/2'>",
            "<img class='file-preview-image kv-preview-data' src='http://lorempixel.com/800/460/nature/3'>",
        ],
        initialPreviewConfig: [
            {caption: "Food-1.jpg", size: 329892, url: "/site/file-delete", key: 1},
            {caption: "Food-2.jpg", size: 872378, url: "/site/file-delete", key: 2}, 
            {caption: "Food-3.jpg", size: 632762, url: "/site/file-delete", key: 3}, 
        ],
        uploadExtraData: {
            img_key: "1000",
            img_keywords: "happy, nature",
        }
    });
    $("#input-707").on("filepredelete", function(jqXHR) {
        var abort = true;
        if (confirm("Are you sure you want to delete this image?")) {
            abort = false;
        }
        return abort; // you can also send any data/object that you can receive on `filecustomerror` event
    });
});
</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.