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} }
};

score 34 · Accepted Answer · answered Mar 30 '11 at 09:07

34

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

answered Mar 30 '11 at 09:07

Deele

3,728
2
33
51

For Chrome, that's meant to be a feature actually, not problem, since Chrome doesn't require input to be clicked to trigger file dialog. Hence input is moved out of way to preserve proper dynamics of the button and cursor visualization. – jayarjo Mar 30 '11 at 09:23
Actually, the z-index problems was for container, that included that input. – Deele Mar 30 '11 at 09:30
I'm not sure why, but i get a refresh method not found on uploader object. Without uploader.refresh() and the css z-index fix, all works fine though – ken Feb 11 '13 at 23:43
2

Tnx a lot, uploader.refresh() was the solution for me when the Add file button didnt work first time. :) – mindore Sep 18 '13 at 18:19
`uploader.refresh()` was the solution for me. Just a note, if your show is an animation, you need to call `uploader.refresh()` after the animated is complete. – Paul Oct 19 '14 at 00:17
This worked a treat for me to get plupload working on iPad and iPhone. A massive thank you to @Deele for sharing this info. :-) – John T Jan 03 '15 at 19:52

score 3 · Answer 2 · answered Nov 20 '12 at 11:10

3

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

answered Nov 20 '12 at 11:10

Lucian Depold

1,999
2
14
25

score 2 · Answer 3 · edited Jan 18 '12 at 23:16

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.

score 1 · Answer 4 · answered May 22 '13 at 00:30

1

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...

answered May 22 '13 at 00:30

Peto Kovi Kováč

51
1

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

4 Answers4