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

Answer 1

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 = $( '
' +
                (file.error ? '
' : '') +
                'Delete
');
            //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($('').text(file.name));
                if (file.thumbnailUrl) {
                    row.find('.preview').append(
                        $('').append(
                            $('').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;
    }
});