Bootstrap Progress Bar for MVC File Upload

Is there an easy way to show a blocking Bootstrap progress bar while a file is loading?

The progress is shown in the status bar in chrome as the file is uploaded:

I'd like the dialog to look something like this

My Action looks something like this:

        public ActionResult Upload(UploadViewModel model)
                using (MemoryStream uploadedFile = new MemoryStream())
                    uploadService.UploadFile(uploadedFile, model.File.ContentType)
                    return View();


  public class UploadViewModel
        public HttpPostedFileBase File { get; set; }


@model Bleh.Web.Models.UploadViewModel

@using (Html.BeginForm("Upload", "Home",
  FormMethod.Post, new { enctype = "multipart/form-data", @role = "form" }))
   <div class="form-group">
    @Html.LabelFor(m => m.File)
    @Html.TextBoxFor(m => m.File, new { type = "file", @class = "form-control" })
    <strong>@Html.ValidationMessageFor(m => m.File, null, new { @class = "label label-danger" })</strong>

<div class="form-group noleftpadding">
    <input type="submit" value="Upload File" class="btn btn-primary" />

Is there an easy way to process the percentage that the browser displays and apply it to the progress bar?


Do ajax progress handler do the job?

function uploadFile(){
    myApp.showPleaseWait(); //show dialog
    var file=document.getElementById('file_name').files[0];
    var formData = new FormData();
    formData.append("file_name", file);
    ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);"POST", "/to/action");

function progressHandler(event){
    var percent = (event.loaded / * 100;
    $('.bar').width(percent); //from bootstrap bar class

function completeHandler(){
    myApp.hidePleaseWait(); //hide dialog

Note: myApp.showPleaseWait(); and myApp.hidePleaseWait(); are defined in the link provided by OP.

(edit: formData and formdata was previously inconsistent)

Need Your Help

Is it possible to update a localized storyboard's strings?

ios xcode string localization storyboard

I localized a part of my application with creating a base.lproj storyboard and 3 string files for it. It was a month ago and after that I added new view controller to app, but this controller's but...

How can I export tables to Excel from a webpage

javascript jquery export-to-excel

How can I export tables to Excel from a webpage. I want the export to contain all the formatting and colours.