asp.net mvc - Barra de progreso de arranque para carga de archivos MVC

asp.net-mvc twitter-bootstrap

Question

¿Hay una manera fácil de mostrar una barra de progreso de Bootstrap bloqueada mientras se carga un archivo?

El progreso se muestra en la barra de estado en Chrome a medida que se carga el archivo:

Me gustaría que el diálogo se pareciera a this

Mi acción se ve algo como esto:

 [HttpPost]
        public ActionResult Upload(UploadViewModel model)
        {
                using (MemoryStream uploadedFile = new MemoryStream())
                {
                    model.File.InputStream.CopyTo(uploadedFile);                            
                    uploadService.UploadFile(uploadedFile, model.File.ContentType)
                    return View();
                 }
         }

Modelo:

  public class UploadViewModel
    {
        [Required]
        public HttpPostedFileBase File { get; set; }
    }

Ver:

@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>

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

¿Hay una manera fácil de procesar el porcentaje que muestra el navegador y aplicarlo a la barra de progreso?

Answer 1

¿El manejador de progreso ajax hace el trabajo?

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);
    ajax.open("POST", "/to/action");
    ajax.send(formData);
}

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

function completeHandler(){
    myApp.hidePleaseWait(); //hide dialog
    $(''.bar'').width(100);
}

Nota: myApp.showPleaseWait(); y myApp.hidePleaseWait(); Se definen en el this proporcionado por OP.

(edit: formData y formdata eran previamente inconsistentes)