This question is not totally answered, please fell free to contribute !
I'm trying to display a simple progress bar
while a large form is submitted.
The form contains a dozen of fields, plus some file upload fields, where the user can select a picture. Then, when he clicks on a Create
button, the form with data and pictures are submitted and the entity is created in DB. (only one click to submit the form AND the pictures).
Everything works fine, but I'd like to display a progress bar during the submit process.
I have found a lot of tutorials explaining how to display a progress bar, but I don't find anyone explaining how to display a progress bar indicating the percentage of work accomplished by a method, ie, I'd like to see 10%, 25%, etc... during the submit process.
So, basically, this is what I've done : (this is an ASP.NET MVC3 project)
@model MyModel
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "target-form", enctype = "multipart/form-data" }))
{
//some Html.TextBoxFor() and other @Html.DropDownListFor
@Html.TextBoxFor(m => m.File, new { type = "file"})
<input type="submit" value="Create" class="submitButton" />
<div id="progressBar"></div>
}
And a basic controller
[HttpPost]
public ActionResult Create(MyModel model)
{
if (ModelState.IsValid)
{
DALLayer dal = new DALLayer()
dal.AddEntity(model);
return RedirectToAction("Index", "Home");
}
return null;
}
Is it possible to transform my last <div>
in a progressBar
displaying the state of upload progress ?
Here are my requirements :
- No plugin (this is a personnal project, I want to understand how to do this by myself).
- Cross compatible, IE8+ (if possible)
- jQuery ok, but no Flash.
Thank you very much !
UPDATE 1
Here is a JSFIDDLE, where I'm trying to adapt this link but without success... If you think you can help, you're welcome !
UPDATE 2
Ok, I used acarlon's answer to submit my form with XMLHttpRequest
and the datas are correcty posted to the controller. However, the ProgressBar still doesn't appear !
I just replace the data passed to the controller by :
formData = new FormData(document.getElementById("target-form") );
xhr.open("POST", "@Url.Action("MyMethod", "MyController")", true );
and try some different headers, like :
xhr.setRequestHeader("X-File-Name", $('#Files_0__File')[0].files[0].name);
xhr.setRequestHeader("X-File-Size", $('#Files_0__File')[0].files[0].size);
xhr.setRequestHeader("X-File-Type", $('#Files_0__File')[0].files[0].type);
//Also tried with "Content-Length" but it doesn't care about it.
(It was hardcoded here to be sure it has good values. I'll do it in a loop when I'll be more at ease with it.)
And when I submit my form, the XMLHttpRequest
send has these fields :
readyState: 4
status: 0 <= should be 200, right ?
And in the error handler
, I have these values :
loaded: 0
total: 883526
type: "error"
So the data are submitted to my controller, but I'm unable to display this damned progressbar...