I have a form input for submitting a file and I styled it because I didn't like the native style. Now, I have a single button that when clicked, it opens up the dialog to select the file. It works fine with a single click on Firefox and Chrome but it doesn't work in IE. The button needs a double click to open up the dialog in IE.

I have tried to trigger a double click with a single click using jQuery:

$("input").click(function() { 
    $(this).dblclick(); 
});

However, it doesn't seem to work. Is there any other approach to trigger a double click for IE?

Here's the demo: /

I have a form input for submitting a file and I styled it because I didn't like the native style. Now, I have a single button that when clicked, it opens up the dialog to select the file. It works fine with a single click on Firefox and Chrome but it doesn't work in IE. The button needs a double click to open up the dialog in IE.

I have tried to trigger a double click with a single click using jQuery:

$("input").click(function() { 
    $(this).dblclick(); 
});

However, it doesn't seem to work. Is there any other approach to trigger a double click for IE?

Here's the demo: http://jsfiddle.net/HAaFb/

• javascript
• jquery
• css

• What version of IE are you trying to support? – tymeJV Commented Mar 11, 2013 at 16:50
• The main question is: why does it need a double click in IE? That might be fixed. A file input is usually made of two parts: something that looks like a text input, and a button. In IE and only IE, the former is triggered by a double click, the latter by a single click. – Gras Double Commented Mar 11, 2013 at 16:50
• @DoubleGrass I hide the button because it's ugly, I created a pseudo element and I keep the input hidden to click and open the dialog. – otinanai Commented Mar 11, 2013 at 16:53

8 Answers 8

What about something like this:

var count=0;
$("input").click(function(e) { 
    count++;
    if(count==2){
         count=0;
    }else{
        e.preventDefault();
    }
});

DEMO: http://jsfiddle.net/HAaFb/1/

http://jsbin.com/ukotit/17/edit

I discovered that the jQuery file upload demo page actually repositions the file input field (while "hidden") so that the Browse button sits nicely within the region of the "Add files" button. And so when you click on that button with IE 8/9/10 it opens up with a single click.

http://blueimp.github.io/jQuery-File-Upload/

In the one CSS I see:

.fileinput-button input {
...
right: 0px;
...
transform: translate(300px, 0) scale(4);
}

The answer isn't to trigger a dblclick, but to make file dialog opening with IE... Right? So i think the soluce would be to trigger a click on the file input (wich will be hidden?)

$("#formId").find("input[type='file']").trigger('click');

In your fiddle, I do this :

$("input").click(function() { 
    $('input[type="file"]').click(); 
});

I try this

$('input[type="file"]').hide().parent().append($('<span />').attr('class', 'filebutton').text('Upload'));
$(".filebutton").click(function() { 
    $('input[type="file"]').click(); 
});

With this CSS

form {
    color:#666;
}
.filebutton {
    content:'upload';
    font:small-caps 15px Georgia;
    letter-spacing:1px;
    border-radius:10px;
    border:1px solid #eee;
    width:100px;
    padding:10px;
    margin:20px;
    text-align:center;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    background-color:#f8f8f8;
}

.filebutton:hover {
    background-color:#f3f3f3!important;
    color:#c00;
     cursor : pointer;
}

And it work's...

File inputs are an native/ActiveX component in IE and therefore can't have events performed on them - same for select inputs.

What really do you need the double click for?

I know I'm probably late to the party, but just in case anyone else stumbles upon this post, I was able to solve a similar issue with this:

$("#uploadInput").bind('mousedown', function (event) {
    $(this).trigger('click')
});

Worked on both IE10 & IE11.

$("input").click(function() { 
    $(this).trigger('dbclick');
});

I haven't check this but I imagine you would need to use something like this:

$('input').on('click', function() {
  $(this).trigger('dblclick');
});

I hope thats not dumb, haha.

It's your CSS... if you disable opacity and the clip stuff in IE, you will see that the actual browse button is over to the right.

Make sure that filter:opacity is not used in IE9, that one worked for me. JSFiddle doesn't work in IE7/8 so I couldn't test those.