Asynchronous AJAX based uploads without preview and ability to trigger fileuploaded event for each file. You would set showPreview to false to disable preview. The progress bar for uploads will by default be shown automatically. To allow trapping and display errors when not having a preview pane, set a custom error container via elErrorContainer. Note that it is recommended to set a display:none style for the error container to have a consistent layout display even when no validation errors exist.

Code

<div class="file-loading">
    <input id="input-709" name="kartik-input-709[]" type="file" multiple>
</div>
<div id="kv-error-1" style="margin-top:10px;display:none"></div>
<div id="kv-success-1" class="alert alert-success" style="margin-top:10px;display:none"></div>
<script>
$(document).ready(function() {
    $("#input-709").fileinput({
        uploadUrl: "/file-upload-single/1",
        uploadAsync: true,
        showPreview: false,
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        maxFileCount: 5,
        elErrorContainer: '#kv-error-1'
    }).on('filebatchpreupload', function(event, data, id, index) {
        $('#kv-success-1').html('<h4>Upload Status</h4><ul></ul>').hide();
    }).on('fileuploaded', function(event, data, id, index) {
        var fname = data.files[index].name,
            out = '<li>' + 'Uploaded file # ' + (index + 1) + ' - '  +  fname + ' successfully.' + '</li>';
        $('#kv-success-1 ul').append(out);
        $('#kv-success-1').fadeIn('slow');
    });
});
</script>