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.

Code

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

<script>
$(document).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", description: 'This is a representative placeholder description for this image.', size: 327892, url: "/site/file-delete", key: 1},
            {caption: "City-2.jpg", description: 'This is a representative placeholder description for this image.', 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() {
                var $thumb = $(this).closest('.file-preview-frame'); // gets the thumbnail
                var fileId = $thumb.data('fileid'); // gets the file identifier for file thumb
                out[fileId] = $el.val();
            });
            return out;
        }
    });
});
</script>