Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Extension of scenario 3 to include your own custom thumbnail templates for capturing additional data in each preview thumbnail. This will include an example of setting the layoutTemplates.footer property. The previewThumbTags will be used to replace the tags in the template dynamically at runtime. After upload, the data returned by initialPreview will be replaced by tags from initialPreviewThumbTags. These tags will be an array of tag objects that will be replaced in the thumbnail footer template for each thumbnail in the initial preview.

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-706" name="kartik-input-706[]" type="file" multiple>
</div>

<script>
$(document).on("ready", function() {
    var $el2 = $("#input-706");

    // custom footer template for the scenario
    // the custom tags are in braces

    var footerTemplate = '<div class="file-thumbnail-footer" style ="height:94px">\n' +
    '  <input class="kv-input kv-new form-control input-sm form-control-sm text-center {TAG_CSS_NEW}" value="{caption}" placeholder="Enter caption...">\n' +
    '  <input class="kv-input kv-init form-control input-sm form-control-sm text-center {TAG_CSS_INIT}" value="{TAG_VALUE}" placeholder="Enter caption...">\n' +
    '   <div class="small" style="margin:15px 0 2px 0">{size}</div> {progress}\n{indicator}\n{actions}\n' +
    '</div>';
                    
    $el2.fileinput({
        uploadUrl: '/file-upload-batch/2',
        uploadAsync: false,
        maxFileCount: 5,
        overwriteInitial: false,
        layoutTemplates: {footer: footerTemplate},
        previewThumbTags: {
            '{TAG_VALUE}': '',        // no value
            '{TAG_CSS_NEW}': '',      // new thumbnail input
            '{TAG_CSS_INIT}': 'kv-hidden'  // hide the initial input
        },
        initialPreview: [
            '<img class="file-preview-image kv-preview-data" src="http://lorempixel.com/800/460/city/1">',
            '<img class="file-preview-image kv-preview-data" src="http://lorempixel.com/800/460/city/2">',
        ],
        initialPreviewConfig: [
            {caption: "City-1.jpg", size: 327892, url: "/site/file-delete", key: 1},
            {caption: "City-2.jpg", size: 438828, url: "/site/file-delete", key: 2}, 
        ],
        initialPreviewThumbTags: [
            {'{TAG_VALUE}': 'City-1.jpg', '{TAG_CSS_NEW}': 'kv-hidden', '{TAG_CSS_INIT}': ''},
            {
                '{TAG_VALUE}': function() { // callback example
                    return 'City-2.jpg';
                },
                '{TAG_CSS_NEW}': 'kv-hidden',
                '{TAG_CSS_INIT}': ''
            }
        ],
        uploadExtraData: function() {  // callback example
            var out = {}, key, i = 0;
            $('.kv-input:visible').each(function() {
                $el = $(this);
                key = $el.hasClass('kv-new') ? 'new_' + i : 'init_' + i;
                out[key] = $el.val();
                i++;
            });
            return out;
        }
    });
});
</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.