How to customize Upload/Download Template of Blueimp jQuery File Upload
javascript, jquery, template-engine
Solution
From looking at the examples and the live demo I created this jsbin: http://jsbin.com/ivonow/1/
It's the code from the demo. I took out the jQuery templates at the bottom of the html and added the uploadTemplate function from above to the options passed in when setting up the fileupload object.
I also had to set uploadTemplateId and downloadTemplateId to null so it wouldn't try to load the the defaults:
{
uploadTemplateId: null,
downloadTemplateId: null,
}
In the html, I took out the table that surrounds the row templates and add a UL but the styling is still weird.
Hope this helps.
Problem
I'm trying to use the jQuery File Upload Demo. I've searched through wiki & template engine wiki but couldn't find an answer how to customize the Upload/Download template without using table row tag. Each time I remove/change table row tag it does not work. Bellow is my customized upload template and it does not work. I don know why, could somebody please help? ``` uploadTemplate: function (o) { var rows = $(); $.each(o.files, function (index, file) { var row = $('<li class="span3"><div class="thumbnail template-upload">' + '<div class="preview"><span></span></div>' + '<div class="caption"><h5 class="name"></h5>' + '<p class="size"></p>' + (file.error ? '<div class="error" colspan="2"></div>' : '<div><div class="progress">' + '<div class="bar" style="width:0%;"></div></div></div>' + '<div class="start"><button>Start</button></div>' ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>'); row.find('.name').text(file.name); row.find('.size').text(o.formatFileSize(file.size)); if (file.error) { row.find('.error').text( locale.fileupload.errors[file.error] || file.error ); } rows = rows.add(row); }); return rows; }, ```