title: jQuery: Firefox doesn't show file select dialog on certain input[type=file] elements
body: <p>Summary:</p>
  
  <p>I have several <code>input[type=file]</code>elements all across my web app, that <strong>do work well</strong>.
  Well, 99% of them work just fine, but just now, I ran into a case, where Firefox does not show the file select dialog when I click on said element.
  I do not note any significant difference to the other circumstances, where it does work.
  There's no non-clickable element over it, you even see firefoxes own button-pushed effect when clicking the element.</p>
  
  <p>To make this clear, there's no "simulated click".
  I'm aware this does not work at all, for security reasons.
  The upload elements are encapsulated in <code>overflow:hidden;</code>-Divs, overlaying the entire content having a higher z-index and the size of the container. You do definately click the button and this worked everywhere I used this technique.</p>
  
  <p>Just not in the following circumstance, and I can't seem to find the reason since 2 days.
  Sorry for the inline CSS, I'll move that over into classes when the problem itself is solved.</p>
  
  <p>Any hint that leads me to the cause of this problem would be <em>greatly</em> appreciated.</p>
  
  <p>Uploader payload injector:</p>
  
  <pre><code>function _initThumbUploader()
  {
  // (1)
  $iframe = $("&lt;iframe /&gt;").attr(
  {
      "name":     "thumb_uploader_target",
      "id":       "thumb_uploader_target",
      "class":    "upload_iframe_target"
  }).css(
  {
      "width":    "1px",
      "height":   "1px",
      "opacity":  "0",
      "display":  "block",
      "border":   "0px none"
  });
  
  // (2)
  $uploadform = $("&lt;form /&gt;").attr(
  {
      "id":       "thumb_uploader_src",
      "method":   "post",
      "enctype":  "multipart/form-data",
      "name":     "thumb_uploader_src",
      "target":   "thumb_uploader_target",
      "action":   "/database/uploadproductpic"    
  }).css(
  {
      "position": "absolute",
      "left":     "0px",
      "top":      "0px",
      "opacity":  "1"
  });
  
  // (3)
  $fileinput = $("&lt;input /&gt;").attr(
  {
      "class":    "upload_triggers",
      "type":     "file",
      "name":     "upthumb",
      "size":     "1",
      "accept":   "image/*"
  }).css(
  {
      "left":         "0px",
      "margin-left":  "-500px",
      "z-index":      "100005",
      "font-size":    "128pt",
      "position":     "absolute",
      "top":          "0px",
      "width":        "600px",
      "height":       "340px",
      "opacity":      "0",
      "cursor":       "pointer"
  });
  
  // 4
  $appinput = $("&lt;input /&gt;").attr(
  {
      "name":     "app",
      "type":     "hidden",
      "value":    "products"
  });
  
  // 5
  $idinput = $("&lt;input /&gt;").attr(
  {
      "name":     "productid",
      "type":     "hidden",
      "value":    "-1"
  });
  
  // Append 3, 4, 5 to 2
  $uploadform.append($fileinput);
  $uploadform.append($appinput);
  $uploadform.append($idinput);
  
  // Append everything to the uploader box
  $(".thumbUploader").append($iframe).append($uploadform);
  
  // Install onchange trigger
  // TODO
  
  }    
  </code></pre>