DJANGO JQUERY-file-upload added file not shown in the template list - jquery-file-upload

Question

I'm trying to use JQUERY-file-upload plugin to upload multiple files, after I added the container and file field, and try to upload, I can select multiple files, but the select files not be shown in the template table list.Below you may find the details:
The input and table as below in the html template:
<input id="fileupload" type="file" name="files[]" multiple>
<table role="presentation"><tbody class="files"></tbody></table>
added the JS library and CSS as below:
<script src="{% static "js/jquery.ui.widget.js" %}" ></script>
<script src="{% static "js/jquery.iframe-transport.js" %}" ></script>
<script src="{% static "js/jquery.fileupload.js" %}" ></script>
<script src="{% static "js/jquery.fileupload-ui.js" %}" ></script>
<link href="{% static "css/jquery.fileupload.css" %}" rel="stylesheet">
<link href="{% static "css/jquery.fileupload-ui.css" %}" rel="stylesheet">
with below JS, I can select multiple files, but the selected files didn't show in the template table:
$('#fileupload').fileupload({
filesContainer: $('table.files'),
uploadTemplateId: null,
downloadTemplateId: null,
replaceFileInput:false,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
'<div class="error"></div>' +
'</td>' +
'<td><p class="size"></p>' +
'<div class="progress"></div>' +
'</td>' +
'<td>' +
(!index && !o.options.autoUpload ?
'<button class="start" disabled>Start</button>' : '') +
(!index ? '<button class="cancel">Cancel</button>' : '') +
'</td>' +
'</tr>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
(file.error ? '<div class="error"></div>' : '') +
'</td>' +
'<td><span class="size"></span></td>' +
'<td><button class="delete">Delete</button></td>' +
'</tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(file.error);
} else {
row.find('.name').append($('<a></a>').text(file.name));
if (file.thumbnailUrl) {
row.find('.preview').append(
$('<a></a>').append(
$('<img>').prop('src', file.thumbnailUrl)
)
);
}
row.find('a')
.attr('data-gallery', '')
.prop('href', file.url);
row.find('button.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
}
});
Any idea on what's wrong on my code? Any help will be appreciated, thanks in advance!