IE requires double click with custom button

Answer 1

I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.

<div class="divFileUpload">
    <input class="fileUpload" type="file" />
</div>

and css:

.divFileUpload {
    background-color: #F60;
    border-radius: 5px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    width: 50%
}
.fileUpload {
    cursor: pointer;
    font-size: 10000px; /* This is the main part. */
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

Answer 2

While @bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.

You will need:

• A wrapper div tag
• An inner dev tag
• Some sort of form input
• JQuery (tested on 2.1)

Steps:

1. Create the "wrapper" div
2. Create an inner "button " div
3. Place the form element underneath the inner "button" div
4. Set the "wrapper" and "inner" divs to the same size
5. Set overflow:hidden on the wrapper
6. Create a JQuery script for the "inner" div setting the on click function
7. In the "inner" function click function call .click() on the input

Seems to work for me in IE 10.

$(document).ready(
    function()
    {
        $("#open_dialog").on("click",function()
                                {
                                    $("input").click();
                                });
        $("input").on("change",function()
                      {
                          alert($("input"));
                          $("#notice").html("uploading");
                      });
    });

#open_dialog
{
    position: relative;
    width: 200px;
    height: 50px;
    color: white;
    font-family: "Arial";
    font-size: 14pt;
    text-align: center;
    top: 25px;
    margin-top: -.5em;
    z-index: 1;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    background: green;
    z-index: 0;
}
input
{
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="open_dialog">Click Me</div>
    <input type="file" />
</div>
<div id="notice">Nothing to upload</div>

Answer 3

The double click is happening on the text portion of the file upload, like @TravisPessetto stated.

Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.

See here for more details.

Answer 4

I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.

HTML

<!--/* Upload input */-->
<div class="input-file">
  Select image
  <input type="file" />
</div>

LESS CSS

/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
  position: relative;
  overflow: hidden;
  margin: 10px;

  input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 10000px;
  }

  // For Chrome
  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }
}

Answer 5

To follow up on what SDLion said....
This might be what you see

But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click. In IE You have to double click the text box to the left of it if you want to see the file upload dialog.

Increase the font size of the file input to fill the button image

Answer 6

I found another more simple solution, just trigger the event "click" on mousedown for this element only:

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

in order to avoid problems on other browsers, apply this solution to IE only:

if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
    $("#your_file_input").mousedown(function(event) {
        if (event.which == 1) {
            $(this).trigger('click');
        }
    })
}

here's your jfiddle modified, check it on IE 9-10: http://jsfiddle.net/7Lq3k/

Edit: example modified in order to limit the event handling for left click only (see: How to distinguish between left and right mouse click with jQuery for details)