Open browse window in IE on single click file input

Question

I'm having some trouble to make the file input work the way I want it. The file element exists of 2 parts, the textfield and the browse button. In other browsers than IE clicking either of them opens a window where you can select your files. In IE however it only opens when I click the browse button. If I click the textfield next to it I have to doubleclick in order for the window to open. Is there a way to fix this with javascript so a single click on the textfield will also open the window? I tried the following, but it didn't work. (code is much simplified from the real example)

Html: <input id="file" name="file" type="file"/>

JS / jQuery:

$("#file").click(function(){
    $(this).trigger("dblclick");
});

$("#file").dblclick(function(){
    alert("Double");
});

Now the above code alerts the "Double" but doesn't open the window. Is there a way to fix this?

Thanks in advance.

Answer 1

Since the entire control is native to the browser (and are never exposed as text box plus button) you simply do not have access to methods/events that will allow you to invoke the upload button. I believe this is mainly to avoid sites tricking the user into uploading non-intended files.

If you can manage to take a little time to implement a workaround, this does a nice of job of creating a rather nice upload component thats easier to manage. I'm sure a quick google will list you many other examples on how to style the file upload component.