How to make a loop for multiple plupload

Question

I have a piece of code like that:

$(function() {
var uploader1 = new plupload.Uploader({
    runtimes : \'gears,html5,flash,silverlight,browserplus\',
    browse         


        

Answer 1

Did not go through the whole logic, but one option should (roughly) be something like this (for 10 uploaders), concatenating the itemIndex to each selector. (watch out for the container item which does not seem to be indexed)

Server side, you may encounter the need to know which uploader triggered the upload. This might be solved, for example, with querystring parameters.

$(function() {
   for (var itemIndex=1, itemIndex<10; itemIndex++)
       initUploader(itemIndex);
});

function initUploader(itemIndex) {
    var uploader1 = new plupload.Uploader({
        runtimes : 'gears,html5,flash,silverlight,browserplus',
        browse_button : 'pickfiles'+itemIndex, 
        container : 'container'+itemIndex,
        max_file_size : '10mb',
        url : 'upload.php',
        flash_swf_url : '/plupload/js/plupload.flash.swf',
        silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ],
        resize : {width : 320, height : 240, quality : 90}
    });

    uploader1.bind('Init', function(up, params) {
        $('#filelist'+itemIndex).html("<div>Current runtime: " + params.runtime + "</div>");
    });

    $('#uploadfiles'+itemIndex).click(function(e) {
        uploader1.start();
        e.preventDefault();
    });

    uploader1.init();

    uploader1.bind('FilesAdded', function(up, files) {
        var temp_img_name = '';
        $.each(files, function(i, file) {
            $('#filelist'+itemIndex).append(
                '<div id="' + file.id + '">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b> <input type="hidden" name="hdnPictureNameAddtemp" value="' + file.name + '"/>' +
            '</div>');
            if(temp_img_name == ''){
            temp_img_name += file.name;
            } else {
            temp_img_name += ', ' + file.name;
            }

        });
        $('#filelist'+itemIndex).append('<input type="hidden" name="hdnPictureNameAdd" value="' + temp_img_name + '"/>');

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader1.bind('UploadProgress', function(up, file) {
        $('#' + file.id + " b").html(file.percent + "%");
    });

    uploader1.bind('Error', function(up, err) {
        $('#filelist'+itemIndex).append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader1.bind('FileUploaded', function(up, file) {
        $('#' + file.id + " b").html("100%");
    });
}