How to show progress in the bootstrap-fileinput plugin?

Question

I have this JavaScript code:

$("#uploadFile").fileinput({
    uploadUrl: url,
    maxFilePreviewSize: 10240,
    allowedFileExtensions: ["xls", "xlsx", "csv"],
    maxFileCount: 1,
    language: 'es',
    theme: 'gly',
    autoReplace: true,
    maxFileSize: 4096,
    required: true,
    browseOnZoneClick: true
});

$('#uploadFile').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form,
      files = data.files,
      extra = data.extra,
      response = data.response,
      reader = data.reader;
    DisplayResults(response);
});

bootstrap-fileinput works but it shows no progress while processing. It only shows progress bar fully painted with "Processing..." text in it when file is uploading and changes to "Done" text when POST returns.

I am using this plugin: http://plugins.krajee.com/file-input

How can I set progress bar to show progress percentage? while file is actually being uploaded and while file is being processed?

Answer 1

According to the documentation, you can set the progress property in the layoutTemplates:

layoutTemplates: Allows you to configure all layout template settings within one property. The layout objects that can be configured are: main1, main2, preview, caption, and modal.

regarding the progress property:

progress: the template for the progress bar when upload is in progress (for batch/mass uploads and within each preview thumbnail for async/single uploads). The upload progress bar when displayed within each thumbnail will be wrapped inside a container having a CSS class of file-thumb-progress. The following tags will be parsed and replaced automatically:

The default is this:

progress: '<div class="progress">\n' +
    '    <div class="progress-bar progress-bar-success progress-bar-striped text-center" role="progressbar" aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
    '        {status}\n' +
    '     </div>\n' +
    '</div>',

which is why you see 'Processing' and 'Done' only. However, if you replace {status} with {percent} it will render the percentage. Again, as per the documentation:

{percent}: will be replaced with the upload progress percentage.

you can also look in to msgProgress.

Reading Material

Plugin Options