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.

lsoliveira · Accepted Answer · 2011-12-19 16:27:25Z

9

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.

answered Dec 19, 2011 at 16:27

lsoliveira

4,6503 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chiliNUT Over a year ago

I had this same issue, my custom input looked fine but IE users had to double click. For those too lazy to click the link: Make the font size of your file input element HUGE (the article suggested 100px, I needed 200px for my form. It blows up the button so the text-input part becomes tiny. Thanks!

lsoliveira · Accepted Answer · 2011-12-16 16:22:07Z

0

Just tested your code with JSFiddle on IE6 (http://jsfiddle.net/SUWRK/) and, from my understanding, it works as you're expecting ... The alert shows up on a single click event (please note that's it's tricky to catch the dblclick event in IE < 9 - see https://gist.github.com/399624).

Are you sure there's not something else going on with the larger code set?

answered Dec 16, 2011 at 16:22

lsoliveira

4,6503 gold badges23 silver badges31 bronze badges

2 Comments

Ilians Over a year ago

The result I want is for the browse window to open, not to alert the "Double". The alert was just to show it actually triggers the double click (which is required to open the browse window) but it doesn't open the window.

lsoliveira Over a year ago

It seems I've misunderstood your question. I apologize for that. Either way, you cannot control the file upload component to the extent you require. See my other response (as the comment box is too short for the entire response).

Collectives™ on Stack Overflow

Open browse window in IE on single click file input

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related