How to customize Upload/Download Template of Blueimp jQuery File Upload

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.

Answer 2

Well first of all, when you wanna work on deleting a picture that has been uploaded, you have to work on the template-download and not the template-upload.

template-upload is used to preview what's gonna be uploaded, and once uploaded, it comes back in the template-download.

Therefore, the template to be overwritten in your case should be template-download. There's a good example on how to do that here : https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine.

NOTE 1: the node that would be dynamicaly removed is targeted by the CSS class template-download. So you should try to position that class to different position within your code (I used divs and it works for me). The "fade" class is used for transition effect.

HOWEVER, it seems that there's some errors within this documentation (probably from an upgrade of the module that has not been reported in the doc).

The following code extract for rewriting the template-download will not work

row.find('.delete')
    .attr('data-type', file.delete_type)
    .attr('data-url', file.delete_url);

because de file object doesn't have any delete_type nor delete_url parameters but deleteType and deleteUrl parameters. That is for Jquery File Upload version 8.9.0, tho' (the older version might work).

So the delete button would not have the correct values if you simply copy'n'paste the code from the doc, therefore, it won't work either.

The correct code to make the delete button work when overwritting the template-download is

row.find('.delete')
    .attr('data-type', file.deleteType)
    .attr('data-url', file.deleteUrl);

For me, the following code works just fine.

 $('#fileupload').fileupload({  
    downloadTemplateId: '',
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $( '<div class="template-download fade"><span class="preview"></span>' +
                (file.error ? '<div class="error"></div>' : '') +
                '<button class="delete">Delete</button></div>');
            //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('.delete')
                    .attr('data-type', file.deleteType)
                    .attr('data-url', file.deleteUrl);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});