Why does 'add files' button in Plupload not fire in latest Chrome or FF on OS X?

marcamillion picture marcamillion · Mar 29, 2011 · Viewed 19.3k times · Source

This is the code that is used to trigger Plupload in my Rails App:

<% content_for :deferred_js do %>
    $("#uploader").pluploadQueue({  
        runtimes : 'gears,html5,flash,browserplus,silverlight,html4',
           url : '/uploads.js',
           //browse_button : 'pickfiles',
           max_file_size : '10mb',
           chunk_size : '2mb',
           unique_names : false,
           container: 'uploader',
           autostart: true,
           //RoR - make sure form is multipart
           //multipart: true,

           // Specify what files to browse for
           filters : [
             {title : "Image files", extensions : "jpg,gif,png,bmp"}
           ],

            // PreInit events, bound before any internal events
            preinit : {

        UploadFile: function(up, file) {
    up.settings.multipart_params = {"upload[stage_id]" :    compv.steps.selectedStage.getID(), "authenticity_token" : compv.tools.csrf_token()};
                }
            },

            // Post init events, bound after the internal events
            init : {

                FilesAdded: function(up, files) {
                    // Called when files are added to queue
                    up.start();
                },


                FileUploaded: function(up, file, info) {
                    // Called when a file has finished uploading
                    console.log('[FileUploaded] File:', file, "Info:", info);
                    info.responseText = info.response;
                    compv.updateStepView('upload', info);
                    $('tr[data-upload] td.selectable-step').each(function(index){
                        compv.steps.selectedUpload.primeUploadDisplay($(this));
                    });
                },

                Error: function(up, args) {
                    // Called when an error has occured
                    up.stop();
                    compv.tools.clientError();
                }
            },

           // Flash settings
           flash_swf_url : '/plupload/js/plupload.flash.swf',

           // Silverlight settings
           silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
         });
         compv.steps.selectedUpload.uploader = $('div#uploader').pluploadQueue();
         //compv.steps.selectedUpload.uploader.init();

         // Client side form validation
         $('form#new_upload').submit(function(e) {
           var uploader = $('#uploader').pluploadQueue();

           // Validate number of uploaded files
           if (uploader.total.uploaded == 0) {
             // Files in queue upload them first
             if (uploader.files.length > 0) {
               // When all files are uploaded submit form
               uploader.bind('UploadProgress', function() {
                 if (uploader.total.uploaded == uploader.files.length)
                   $('form').submit();
               });

               uploader.start();
             } else
                $('div#upload-empty-dialog').dialog("open");
             e.preventDefault();
           }
      });
    $('div#upload-empty-dialog').dialog({modal:true, autoOpen: false, minWidth: 325, buttons: { "Ok": function() { $(this).dialog("close"); } }});
    $('div#upload-cancel-dialog').dialog({modal:true, autoOpen: false, minWidth: 325});
<% end %>
<div class="dialog" id="upload-empty-dialog" title="No Files">
<p>You must select files to upload first.</p>
</div>
<div class="dialog" id="upload-cancel-dialog" title="Cancel Uploading?">
<p>Do you want to stop uploading these images? Any images which have not been uploaded will be lost.</p>
</div>

Is there anything obvious that jumps out that could be causing this ?

Edit1: Btw, when I try this upload form - http://jsfiddle.net/Atpgu/1/ - the add files button fires for me on both Chrome & FF - so I suspect it has something to do with my JS, I just don't know what.

Edit2: This is what the definition of compv is. I know it's a bit verbose, and I was going to reduce it - but decided not to at the risk of removing something important.

var compv = {
    exists: true,
    tools: { exists: true,
         csrf_param : null,
         csrf_token : null},
    comments: { exists: true,
            updateView: null,
            selectImage: null,
            upvote:null,
            downvote:null,
            showVotes:null,
            getUploadID: function(element){
                    return $(element).parents("li").attr("data-upload-id");
                }},
    steps: { exists: true,
         selectFn:{},
         selectedClass: "selected-step",
         selectableClass: "selectable-step",
         selectedClient: { element: null,
                           id: null,
                   stepType: "client",
                   ajaxSuccess: null },
         selectedProject: { element: null,
                    id: null,
                    stepType: "project",
                            ajaxSuccess: null },
            selectedStage: { element: null,
                  id: null,
                  stepType: "stage",
                  ajaxSuccess: null,
                  getID: function(){
                    return compv.steps.selectedStage.id;
                        },
                  displayCompare: function(){
                    window.open($(this).attr('data-url'), "_blank");
                    }},
             selectedUpload: { element: null,
                  id: null,
                  stepType: "image",
                      primeUploadDisplay: null,
                  ajaxSuccess: null,
                  uploader: null,
                  noCloseDialog: false} }
};

Answer

Deele picture Deele · Mar 30, 2011

Plupload is not rendering correctly for hidden elements, that is why it should be refreshed after shown. In given example, after DIALOG is opened, there should be added few lines of code:

var uploader = $('#uploader').pluploadQueue();
uploader.refresh();

I noticed, that in chrome, it has problems to set z-index correctly for input container. To workaround that, just add another line after previous two:

$('#uploader > div.plupload').css('z-index','99999');