¿Por qué el botón "agregar archivos" en Plupload no se dispara en las últimas Chrome o FF en OS X?

Question

Este es el código que se utiliza para desencadenar Plupload en mi aplicación Rails:

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

¿Hay algo obvio que salta a la vista que podría estar causando esto?

Edit1: Por cierto, cuando intento esta forma de carga - http://jsfiddle.net/Atpgu/1/ - el botón añadir incendios archivos para mí tanto en Chrome & FF - por lo que sospecho que tiene algo que ver con mis JS, sólo que no sé qué.

Edit2: Esto es lo que es la definición de compv. Sé que es un poco detallado, y lo iba a reducir, pero decidí no hacerlo a riesgo de eliminar algo importante.

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 no se está procesando correctamente para elementos ocultos, es por eso que debe actualizarse después de mostrarse. En el ejemplo dado, después de la apertura de diálogo, existen debe añadirse pocas líneas de código:

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

Noté, que en cromo, que tiene problemas para establecer z-index correctamente para recipiente de entrada. Para solucionar esto, sólo tiene que añadir otra línea después de las dos anteriores:

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

Answer 2

Sé que esto es una cuestión de edad, pero parece que la cuestión del índice Z es todavía alrededor en las versiones posteriores de plupload (1.5.2).

El problema es causado por el código en plupload.html5.js que cambia el índice z del botón "Agregar archivos" específicamente para navegadores Webkit y al hacerlo, rompe cosas:

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

Si ver el DOM se quiere vea que style="z-index: 0;" se agrega al elemento de anclaje #uploader_browser, y que el div que contiene el botón "Agregar archivos" obtiene un índice z de -1 que efectivamente lo oculta detrás de la página (según el índice z de su página, por supuesto).

Para solucionar esto, establecí el valor de zIndex en el archivo mencionado anteriormente en un valor superior a la página en la que se visualizaba el plupload div.

Answer 3

Puede resolver este problema fácilmente con Chrome configurando el código CSS de su botón browse (= Seleccionar archivos) en un índice z más alto (índice z: 99999).

Lucian

Answer 4

solución de Deele con CSS es bueno, pero es poco mejor que hacerlo de esta manera:

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

que se ciernen camino del botón no se rompe ...