Unable to click input type="file" in windows safari browser

Question

Here is my html code

<input type="button" id="btn" value="UPLOAD" />
<input id="fileupload" type="file" style="display:none;" />

here is jquery code

 $('#btn').click(function () {
            $('#fileupload').click();
        });

It works as expected in Chrome and in windows safari doesn't do any thing.And i checked no error in console. Here is a jsfiddle

Does it work if the `fileupload` element isn't hidden? – Barmar Aug 30 '13 at 10:59 — Barmar, Aug 30 '13 at 10:59

score 12 · Accepted Answer · 2013-08-30T11:06:50.653

12

try hiding input file using the below code instead of display:none;

 opacity:0;width:0px;height:0px;

edited Aug 30 '13 at 11:06

answered Aug 30 '13 at 11:01

dats nice...i guess opacity alone will do ...no need of setting width and height to 0 – iJade Aug 30 '13 at 11:28
try clicking around the immediate empty space near the button, you will end up clicking the file element by mistake(which is not visible), i.e. why better set width and height to 0px as a precaution :) – Aug 30 '13 at 11:32
never thought dat..thnks anywaz :) – iJade Aug 30 '13 at 11:47

score 1 · Answer 2 · edited Aug 07 '14 at 09:53

1

You can also do:

input[type="file"] {
    visibility: hidden;
    position: absolute;
}

edited Aug 07 '14 at 09:53

Tadas Šukys

answered Aug 07 '14 at 09:28

thirdtiu

2 Answers2