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

Question

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 1

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');

Answer 2

You can solve this problem with Chrome easier by setting the css of your browse_button (= Select Files Button) to a higher z-index (z-index:99999) !

Lucian

Answer 3

I know this is an old question but it seems that the z-index issue is still around in the later versions of plupload (1.5.2).

The problem is caused by code in plupload.html5.js which changes the z-index of the "Add Files" button specifically for Webkit browsers and in doing so breaks things:

zIndex = parseInt(plupload.getStyle(browseButton, 'z-index'), 10);
if (isNaN(zIndex)) {
    zIndex = 0;
}

plupload.extend(browseButton.style, {
    zIndex : zIndex
});

plupload.extend(inputContainer.style, {
    zIndex : zIndex - 1
});

If you view the DOM you will see that style="z-index: 0;" is added to the #uploader_browser anchor element, and the div containing the "Add Files" button gets a z-index of -1 which effectively hides it behind the page (depending on your pages z-index of course).

To fix this I set the zIndex value in the file mentioned above to something higher than the page that the plupload div was being displayed on.

Answer 4

Deele's solution with css is good but little better is to do it this way:

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

That way hover of button will be not broken...