Valums fileuploader with multiple instances

Question

Im using multiple instances with valums fileuploader, but it seems that uploader only use last settings for every instances, is there an option to avoid this and use local settings? Uploading goes fine on the right instance, but element inside initializeUploader are always the same, no matter which instance im using.

jQuery(function() {
    $("[rel='uploadable']").each(function(){
        initializeUploader($(this).attr("id"))
    })
});
function initializeUploader(anchor) {
    element = document.getElementById(anchor)
    uploader = new qq.FileUploader({
        element: element,
        action: element.getAttribute("data-upload-path"),
        allowedExtensions: ["png", "gif", "jpg", "jpeg"],
        params: {
            authenticity_token: $("meta[name=csrf-token]").attr("content")
        },
        onSubmit: function(id, fileName){
            console.log ($(element))
            $(element).append("<span class='image'><div id='progress-" + id + "'></div></span>")
        },
        onProgress: function(id, fileName, loaded, total){
            var progress = (loaded / total) * 100;
            $("#progress-" + id).progressbar({value: progress})
        },
        onComplete: function(id, fileName, responseJSON){
            image_url = ""
            $.each(responseJSON, function(key, item) {
                if (key == "url")
                    image_url = item
            });

            $("#progress-" + id).remove();
            console.log($(element).parent())
            console.log($(element).closest(".quanta"))
            console.log(image_url)
            $(element).closest(".quanta").css({'width': '300px', 'height': '300px', 'background-color': '', 'background-image': 'url(' + image_url + ')', 'background-size': '100% 100%'})
        },
        debug: true
    });
};

score 2 · Accepted Answer · answered Mar 08 '12 at 00:26

I'm faced the same issue. To solve my problem I used this trick.

       $('a[href="#tabpdf"]').livequery('click', function () {
          initializeUploader($('#pdfuploader')[0]);  
      });
      $('a[href="#tabphotos"]').livequery('click', function () {
          initializeUploader($('#photouploader')[0]);  
      });

I use conditional statements to load the function, and I passed specific parameter to the function. Hope it helps.

score 2 · Answer 2 · answered Mar 08 '12 at 01:02

In initializeUploader, your element and uploader variables are global. So when things like

    ...
    onSubmit: function(id, fileName){
        console.log ($(element))
        $(element).append("<span class='image'><div id='progress-" + id + "'></div></span>")
    },
    ...

are invoked, it's going to invoke on the last value set to element. use "var" so that a local variable is captured and used.

Valums fileuploader with multiple instances

2 Answers2