render previously uploaded files

Hi, I have succesfully implemented the uploader using on a codeigniter project with PHPTAL.

Because I was using PHPTAL I had to giveup the default templates used by the uploader... so I defined my own templates when initializing the uploader... something like this:

var div_id = $("#div_id").val(); $('#'+div_id).fileupload({ maxNumberOfFiles: $("#max_number_of_files").val(), filesContainer: $('#upload_files_container'), uploadTemplateId: null, downloadTemplateId: null, uploadTemplate: function (o) { var rows = $(); $.each(o.files, function (index, file) { var row = $('' + '' + '' + '' + (file.error ? '' : '

' + '

' + '' ) + ''); 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; }, downloadTemplate: function (o) { var rows = $(); $.each(o.files, function (index, file) { var row = $('' + (file.error ? '' + '' + '' : '' + '' + '' + '' + '' + '' + '' + '' + '' ) + ' ' + ''); row.find('.size').text(o.formatFileSize(file.size)); if (file.error) { row.find('.name').text(file.name); row.find('.error').text( locale.fileupload.errors[file.error] || file.error ); } else { row.find('.name a').text(file.name); row.find('.name input#filename'+indexxx).val(file.name); row.find('.name input#filesize'+indexxx).val(o.formatFileSize(file.size)); row.find('.name input#fileurl'+indexxx).val(file.url); row.find('.name input#filetype'+indexxx).val(file.type); if (file.thumbnail_url) { row.find('.preview').append('') .find('img').prop('src', file.thumbnail_url); row.find('a').prop('rel', 'gallery'); } row.find('a').prop('href', file.url); row.find('.delete') .attr('data-type', file.delete_type) .attr('data-url', file.delete_url); } rows = rows.add(row);

                    indexxx++;
                });      

                return rows;
            }                

        });

some fields are variables, because I use the same uploader view for more than one page...

The problem is when loading previously uploaded pictures... my fist try was to use an AJAX that looks like this:

        $.ajax({
            url: $("#"+div_id + " input#ajax_uploader_url").val(),
            dataType: 'json', 
            success : function(data) {  
                var rows = $();
                $.each(data.files, function (index, file) {
                    var row = $('<tr class="template-download fade">' +
                        (file.error ? '<td></td>' +
                                      '<td class="name"></td>' +
                                      '<td class="size"></td><td class="error" colspan="2"></td>' :
                                      '<td class="preview"></td>' +
                                      '<td class="name" colspan="3">' +
                                          '<a target="_blank"></a>' +
                                          '<input type="hidden" id="filename'+indexxx+'" name="uploads['+indexxx+'][name]" value="" />' +
                                          '<input type="hidden" id="filesize'+indexxx+'" name="uploads['+indexxx+'][size]" value="" />' +
                                          '<input type="hidden" id="fileurl'+indexxx+'" name="uploads['+indexxx+'][url]" value="" />' +
                                          '<input type="hidden" id="filetype'+indexxx+'" name="uploads['+indexxx+'][type]" value="" />' +
                                      '</td>' +
                                      '<td class="size"></td>'
                        ) + '<td class="delete"><button class="btn btn-danger btn-mini"><i class="icon-trash icon-white"></i><span></span></button> ' +
                            '</td></tr>');
                    row.find('.size').text(formatFileSize(file.size));
                    if (file.error) {
                        row.find('.name').text(file.name);
                        row.find('.error').text(
                            locale.fileupload.errors[file.error] || file.error
                        );
                    } else {
                        row.find('.name a').text(file.name);
                        row.find('.name input#filename'+indexxx).val(file.name);
                        row.find('.name input#filesize'+indexxx).val(formatFileSize(file.size));
                        row.find('.name input#fileurl'+indexxx).val(file.url);
                        row.find('.name input#filetype'+indexxx).val(file.type);
                        if (file.thumbnail_url) {
                            row.find('.preview').append('<a><img /></a>')
                                .find('img').prop('src', file.thumbnail_url);
                            row.find('a').prop('rel', 'gallery');
                        }
                        row.find('a').prop('href', file.url);
                        row.find('.delete')
                            .attr('data-type', file.delete_type)
                            .attr('data-url', file.delete_url);
                    }
                    rows = rows.add(row);

                    indexxx++;
                });
                $('#upload_files_container').html(rows);
                $('#upload_files_container tr').removeClass("fade");

                $('#loading').remove();
            }

        }).fail(function () {
            $('<span class="alert alert-error"/>')
            .text('Server unavailable - ' + new Date())
            .appendTo("#"+div_id);
        });

The problem is that with this AJAX, I have problems with the maxNumberOfFiles option... it is not incremented/decremented correctly if I allready have an uploaded file...

example: for this uploder instance the maxNumberOfFiles = 3...if I have a previously uploded file, the maxNumberOfFiles should be 2, but it remains 3, it is not decremented, do it will let me upload 3 more files...

Please help ! I'm struggling with this for 2 days now...

blueimp / jQuery-File-Upload

render previously uploaded files #2243