14

I have a script that is dived as:

HTML:

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

JavaScript(JQuery 2):

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

CSS:

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

Note: This issue was there before blur was put to hide the flashing icon in IE.

In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.

The only thing I've tried so far is to .render("click") on the input, but that didn't work.

JSFiddle: http://jsfiddle.net/plowdawg/mk77W/

Travis Pessetto
  • 3,260
  • 4
  • 27
  • 55
  • It probably has something to do with the fact that when you click it, it puts you into the text portion of the file input, so you're clicking on the text-side of the fileinput rather than the browse button. – Kevin B Jun 19 '13 at 16:04

6 Answers6

24

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%
}
Dovydas Šopa
  • 2,282
  • 8
  • 26
  • 34
5

To follow up on what SDLion said....
This might be what you see
This is what you see
But really on top of that there is a file upload control that has been made transparent. 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
Increase the font size of the file input to fill the button image

Community
  • 1
  • 1
tBone77
  • 149
  • 2
  • 3
3

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>
Travis Pessetto
  • 3,260
  • 4
  • 27
  • 55
0

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.

bastos.sergio
  • 6,684
  • 4
  • 26
  • 36
0

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)

Community
  • 1
  • 1
pastorello
  • 982
  • 10
  • 23
  • Just curious, does this work with IE8? I am no longer working on the project I was working on, but if I remember right it had to have IE8 support (government). It may have been IE9 though. – Travis Pessetto Jul 15 '14 at 16:34
0

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;
  }
}
Fred K
  • 13,249
  • 14
  • 78
  • 103