Getting rid of HTML file inputs once and far all
I know my answer comes a bit late, but I thought I'll share. I don't really get the problem you're facing. What's wrong with doing the regular styling of label, as in my example?

Answering your questions:


  @CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Does it work for all browsers?


&lt;label&gt; was introduced in HTML4, even IE6+ can support it.


  My reason for creating this script is to allow the buttons on a jQueryUI dialog to work as file upload triggers (...)


Don't use JavaScript (and especially it's libraries) for elements and functionalities that you can create with pure (X)HTML and CSS. But if you have to do the file upload with a jQuery UI buttons or any other element and you don't want to create and style a &lt;label&gt;, you can simply do:

var fileInput = document.querySelector('input[type="file"]');

document.querySelector('input[type="button"]').onclick = function() {
  fileInput.click();
}
fileInput.onchange = function() {
  this.form.submit();
};


Where input[type="file"] bear display: none and input[type="button"] can be any element that we'd like to trigger file upload action. Take a peak into my working example.