Javascript .click() not firing in safari

Question

I have a file upload input in my application and I'm using a link and Javascript to open the dialog.

<a class="uploadlink" style="cursor:pointer" onclick="document.getElementById('file').click()">Open</a>

<input type="file" name="file" id="file" style="display:none" onchange="document.getElementById('txt').value = this.value"/>

My code is working in all browsers and devices except Safari and Apple devices. When I click the link and check the link the console doesn'teven register a error. Can someone suggest a solution?

I wouldn't get your hopes up. See: http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input — Paul Roub, Jul 31 '13 at 16:17
@PaulRoub that question is from 2008 I am sure after 5 years atleast javascript has progressed. — Flood Gravemind, Jul 31 '13 at 16:18
@FloodGravemind Javascript hasn't really progressed in the direction of standardising IEisms. How about trying to see if jQuery's `.click()` implements a better way of programatically triggering a click? — millimoose, Jul 31 '13 at 16:22
@millimoose tried `$('#file').trigger('click')` once again apple failed to yield. — Flood Gravemind, Jul 31 '13 at 16:30
@FloodGravemind Hm. I think the usual hack here is overlaying a transparent file input *over* the link. — millimoose, Jul 31 '13 at 16:41
@millimoose Thanks exactly what I was doing and came up with a workable solution. — Flood Gravemind, Jul 31 '13 at 16:43
@FloodGravemind Also, this works for me on iOS 6: http://cdpn.io/zcKEn As does the version with `.trigger()`: http://cdpn.io/sxrof . I call PEBKAC or using an outdated jQuery. — millimoose, Jul 31 '13 at 16:45
@FloodGravemind Nope. Still works on the phone even with the upload hidden. (I've updated the pens.) Can't say for desktop Safari since I'm in Boot Camp at the moment and can't be arsed to reboot. — millimoose, Jul 31 '13 at 16:50
@FloodGravemind Belatedly: I tested my two pens on Safari as well. Shockingly they work. I have no idea why this was a problem for you but it doesn't seem to be browser incompatibility. — millimoose, Aug 01 '13 at 12:27
@millimoose i tried it on most 2 ios devices i could get my hands on. Plus safari on windows. — Flood Gravemind, Aug 01 '13 at 15:48
@FloodGravemind Safari on Windows is one major version behind, and I'm not sure which version of iOS you were running. Also, do the codepens I've linked to break on them as well? — millimoose, Aug 01 '13 at 15:53

Flood Gravemind · Accepted Answer · 2013-07-31T16:42:15.527

Since I had display:none in safari it was not only not rendered but also not referenced. I have now changed my code as follows.

Jquery solution

<a class="uploadlink" style="cursor:pointer" onclick="$('#file').trigger('click');">Open</a>
<input type="file" name="file" id="file" style="opacity:0" onchange="document.getElementById('txt').value = this.value"/>

Javascript Solution

 <a class="uploadlink" style="cursor:pointer"  onclick="document.getElementById('file').click();">Open</a>

It is working now even in safari.

Javascript .click() not firing in safari

1 Answers1