Question

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;
    },

Answer 1

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.