I am having problem with getting the progress bar working properly I have setup for when a file is uploaded. The progress bar works fine but however the bar doesn't work in sync with the size of the file. So if the file is 80 MB and if the file is still being processed in the back end the progress bar will always says upload 100%.
I am not sure where am going wrong in the code? Basically want the progress bar to be in sync with code being processed in the back end.
Here is progress so far
Controller:
//
// POST
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UploadMultipleFiles(IEnumerable<HttpPostedFileBase> files)
{
int count = 0;
if (files != null)
{
foreach (var file in files)
{
if (file != null && file.ContentLength > 0)
{
FileUploadService service = new FileUploadService();
var postedFile = Request.Files[0];
StreamReader sr = new StreamReader(postedFile.InputStream);
StringBuilder sb = new StringBuilder();
DataTable dt = CreateTable();
DataRow dr;
string s;
int j = 0;
while (!sr.EndOfStream)
{
while ((s = sr.ReadLine()) != null)
{
//Ignore first row as it consists of headers
if (j > 0)
{
string[] str = s.Split(',');
dr = dt.NewRow();
dr["Postcode"] = str[0].ToString();
dr["Latitude"] = str[2].ToString();
dr["Longitude"] = str[3].ToString();
dr["County"] = str[7].ToString();
dr["District"] = str[8].ToString();
dr["Ward"] = str[9].ToString();
dr["CountryRegion"] = str[12].ToString();
dt.Rows.Add(dr);
}
j++;
}
}
// Save to database
service.SaveFilesDetails(dt);
sr.Close();
count++;
}
}
}
return new JsonResult { Data = "Successfully " + count + " file(s) uploaded" };
}
View:
@{
ViewBag.Title = "File Upload";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<h2>Upload a CSV File</h2>
@using (Ajax.BeginForm("UploadMultipleFiles", "File", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="row">
<div class="col-md-5">
<input type="file" name="files" id="fu1" />
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="Upload File" />
</div>
</div>
}
<div class="progress">
<div class="progress-bar">0%</div>
</div>
<div id="status"></div>
<div id="loading" class="loader">Loading...</div>
<style>
.progress {
position: relative;
width: 400px;
border: 1px solid #ddd;
padding: 1px;
}
.progress-bar {
width: 0px;
height: 20px;
background-color: #57be65;
}
</style>
@section scripts{
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function () {
(function () {
var bar = $('.progress-bar');
var percent = $('.progress-bar');
var status = $('#status');
$('#loading').hide();
$('form').ajaxForm({
beforeSend: function () {
status.empty();
var percentValue = '0%';
bar.width(percentValue);
percent.html(percentValue);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentValue = percentComplete + '%';
bar.width(percentValue);
percent.html(percentValue);
$('#loading').show();
},
success: function (d) {
var percentValue = '100%';
bar.width(percentValue);
percent.html(percentValue);
$('#fu1').val('');
$('#loading').hide();
//alert(d);
},
complete: function (xhr) {
status.html(xhr.responseText);
}
});
})();
});
</script>
}