Backload and jquery File Uploader - Do not display uploaded files properly

Backload and jquery File Uploader - Do not display uploaded files properly

I'm using MVC 4 and Backload file uploader with jquery client side
scripting. I used nuget to get the Demo package which downloads the
controller and view as a starting point.
My problem is on my local server and my online server, after I upload
files the application does not accurately display all the files uploaded.
Often it get's stuck displaying just 4 or 5 files and ignores the rest.
Even if I delete one of the files being displayed and refresh the page it
still shows the same 4 or 5 images. I have verified that the files are
being uploaded and/or deleted by the application. I tried clearing the
cache by hitting cntl F5 but to no avail.
Can anyone point me in the right direction to correct this problem. Below
is the view and controller that comes from the demo downloaded from NuGet.
CONTROLLER:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Spotless_Interiors.Controllers
{
[Authorize]
public class BackloadDemoController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
VIEW:
@{
ViewBag.Title = "File Upload";
}
@section topScripts {
@Styles.Render("~/Content/themes/base/css")
@Styles.Render("~/Content/css")
<!-- We use Backloads. bundeling feature to register only those client
side javascript and style files of the jQuery File Upload Plugin
that are needed -->
@Styles.Render("~/bundles/fileupload/bootstrap/BasicPlusUI/css")
<!-- Bootstrap CSS fixes for IE6 -->
<!--[if lt IE 7]><link rel="stylesheet"
href="/Content/FileUpload/css/bootstrap/bootstrap-ie6.debug.css"><![endif]-->
<!--[if lt IE 9]><script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if IE]><meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"><![endif]-->
}
@section scripts {
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<!-- We use Backloads. bundeling feature to register only those client
side javascript and style files of the jQuery File Upload Plugin that
are needed -->
@Scripts.Render("~/bundles/fileupload/bootstrap/BasicPlusUI/js")
<!-- Initialize the jQuery File Upload Plugin -->
<script src="~/Scripts/FileUpload/backload.demo.js"></script>
}
<div>
<!-- The file upload form used as target for the file upload
widget -->
<form id="fileupload" action="/Backload/UploadHandler"
method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin
page -->
<noscript><input type="hidden" name="redirect"
value="/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete
files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span7">
<!-- The fileinput-button span is used to style the
file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The loading indicator is shown during file
processing -->
<span class="fileupload-loading"></span>
</div>
<!-- The global progress information -->
<div class="span5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped
active" role="progressbar" aria-valuemin="0"
aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download
-->
<table role="presentation" class="table table-striped"><tbody
class="files" data-toggle="modal-gallery"
data-target="#modal-gallery"></tbody></table>
</form>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
{% if (file.error) { %}
<div><span class="label
label-important">Error</span>
{%=file.error%}</div>
{% } %}
</td>
<td>
<p class="size">{%=o.formatFileSize(file.size)%}</p>
{% if (!o.files.error) { %}
<div class="progress progress-success
progress-striped active" role="progressbar"
aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0"><div class="bar"
style="width:0%;"></div></div>
{% } %}
</td>
<td>
{% if (!o.files.error && !i && !o.options.autoUpload)
{ %}
<button class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnail_url) { %}
<a href="{%=file.url%}" title="{%=file.name%}"
data-gallery="gallery"
download="{%=file.name%}"><img
src="{%=file.thumbnail_url%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
<a href="{%=file.url%}" title="{%=file.name%}"
data-gallery="{%=file.thumbnail_url&&'gallery'%}"
download="{%=file.name%}">{%=file.name%}</a>
</p>
{% if (file.error) { %}
<div><span class="label
label-important">Error</span>
{%=file.error%}</div>
{% } %}
</td>
<td>
<span
class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
<button class="btn btn-danger delete"
data-type="{%=file.delete_type%}"
data-url="{%=file.delete_url%}"{% if
(file.delete_with_credentials) { %}
data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1"
class="toggle">
</td>
</tr>
{% } %}
</script>
</div>