Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Initial Preview Configuration for AJAX based uploads along with initial preview delete button and methods. The overwriteInitial property is set to false. Note that you can set initialPreviewAsData property set to true, to pass only the data part of initial preview. This property will identify that you are sending preview as data only and not the entire raw markup. This scenario also shows additional extra data you can send with the file uploaded to the server by configuring uploadExtraData. This scenario also shows how you can setup minimum file count (2 for this case) to make your file input mandatory to have the minimum number of files.


Code

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

<script>
$(document).on("ready", function() {
    $("#input-702").fileinput({
        theme: 'fa',
        uploadUrl: "/file-upload-batch/1",
        uploadAsync: false,
        minFileCount: 2,
        maxFileCount: 5,
        overwriteInitial: false,
        initialPreview: [
            "http://lorempixel.com/800/460/people/1",
            "http://lorempixel.com/800/460/people/2"
        ],
        initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
        initialPreviewFileType: 'image', // image is the default and can be overridden in config below
        initialPreviewConfig: [
            {caption: "People-1.jpg", size: 576237, width: "120px", url: "/site/file-delete", key: 1},
            {caption: "People-2.jpg", size: 932882, width: "120px", url: "/site/file-delete", key: 2}, 
        ],
        uploadExtraData: {
            img_key: "1000",
            img_keywords: "happy, places",
        }
    }).on('filesorted', function(e, params) {
        console.log('file sorted', e, params);
    }).on('fileuploaded', function(e, params) {
        console.log('file uploaded', e, params);
    });
});
</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.