jQuery progress bar using bluimp library

Question

I am trying to implement progress bar while uploading the files using bluimp library, however there is no enough documentation available on there site. Also, in there demo they have shown remaining time, bytes, percentage etc while uploading the files. However, I am unable any sort of explanation on net and onto there site.

So anyone can please provide me some guideline to do this. I am trying this from many days. Below is my html

<div class="progress" id=divProgress style="display:none;">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">0% complete</span>
    </div>
</div>

and this is my json

$(document).ready(function () {

  $('#fileupload').fileupload({
    url: '/eSignature/Document/UploadFiles',
    forceIframeTransport: false,
    autoUpload: true,
    progressInterval: 100,
    bitrateInterval: 500,
    singleFileUploads: false,
    recalculateProgress: true,
    maxFileSize: 1024,
    done: function (e, data) {
        $("#divResult").html(data.result);
    },
    progressall: function (e, data) {

        $("#divProgress").show();

        var progress = parseInt(data.loaded / data.total * 100, 10);

        $('#divProgress .progress-bar').css(
            'width',
            progress + '%'
        );

    }
  });
});

Answer 1

Not sure how your Requests get handled, but for the MVC4 devs.

You need the following libraries (Get from NuGet in Visual Studio or console):

• jQuery
• jQuery UI
• jQuery UI Core : Widget
• jQuery.FileUpload

Add this in your BundlesConfig.cs

             bundles.Add(new ScriptBundle("~/bundles/bluimp").Include(
                        "~/Scripts/jquery-ui-1.11.2.min.js",
                        "~/Scripts/jQuery.FileUpload/jquery-2.1.1.js",
                        //"~/Scripts/jquery.ui.widget.min.js",
                        //"~/Scripts/cors/jQuery.FileUpload/jquery.xdr-transport.js",
                        //"~/Scripts/cors/jQuery.FileUpload/jquery.postmessage-transport.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-angular.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-image.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.iframe-transport.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-jquery-ui.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-ui.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-process"));

jquery.xxx.js should be included on your _Layout.cshtml page. Add the following to your Upload page at the bottom somewhere.

    @section Scripts {
    @Scripts.Render("~/bundles/bluimp")
}

Then finally make sure it's an asynchronous (async) call, so make use of a WebApi call (and not a vanilla controller. Then also add the the following to the style (BundlesConfig.cs with a StyleBundle):

                      "~/Content/jQuery.FileUpload/css/jquery.fileupload",
                  "~/Content/jQuery.FileUpload/css/jquery.fileupload-ui.css",
                  "~/Content/jQuery.FileUpload/css/jquery.fileupload-ui-noscript.css",
                  "~/Content/jQuery.FileUpload/css/jquery.fileupload-ui.css",

Hope it helps (someone)