Jquery trigger click not working on safari browsers in mac, Ipad & Iphone

Question

I am trying to trigger a click event on input type="file" on the click of an another button.

Demo: http://jsfiddle.net/Y85g6/

It's working fine in all browsers except on safari browsers in mac, Ipad & Iphone.

Is there any trick to accomplish this task?

possible duplicate of [In JavaScript can I make a "click" event fire programmatically for a file input element?](http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input) — ceejayoz, Jan 19 '12 at 15:12
Either don't, or make it with a Flash-based solution like SWFUpload. — ceejayoz, Jan 19 '12 at 15:22

score 14 · Answer 1 · edited Mar 18 '16 at 01:45

14

Instead of trigger("click") you can use the following code which works successfully in all browsers:

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); 
document.getElementById(elem_id).dispatchEvent(evt);

edited Mar 18 '16 at 01:45

Alexis Wilke

19,179
10
84
156

answered Apr 08 '13 at 10:05

Sattu

139
1
8

Only `initEvent()` is now deprecated. The `jQuery.trigger("click")` has the advantage of using the newest available interface as made available... – Alexis Wilke Mar 18 '16 at 01:47

score 6 · Accepted Answer · edited Mar 18 '16 at 01:09

6

Found an alternative.

Just position the input type="file" over the custom button by absolute positioning it and use jQuery fadeTo('fast',0) to hide it.

Now if we click over the custom button file browser window appears.

Its working in all desktop browsers but not in iPhone & iPad as they don't allow to upload any file.

edited Mar 18 '16 at 01:09

Alexis Wilke

19,179
10
84
156

answered Jan 24 '12 at 17:56

Mandeep Pasbola

2,631
2
26
50

2

that jQuery just sets the opacity to 0. CSS is probably more appropriate than using a jQuery animation – Zach Lysobey Feb 29 '16 at 19:07

score 5 · Answer 3 · answered Nov 01 '13 at 13:30

5

make the element visible, as trigger event doesnt work on hidden elements in mac safari.

answered Nov 01 '13 at 13:30

rajansoft1

1,336
2
18
38

score 2 · Answer 4 · answered Jun 26 '12 at 15:38

The following approach did the trick for me:

$(".upload_on_click").each(function(index) {
    var form = $(this).next("form");
    //form.hide(); /* THIS TECHNIQUE DIDN'T WORK IN SAFARI */
    form.css("position", "absolute");
    form.css("visibility", "hidden");
    $(this).css("cursor", "pointer");
    $(this).click(function() {
        $('input[type="file"]', form).trigger("click");
    });
    $('input[type="file"]', form).change(function() {
        $('input[type="submit"]', form).trigger("click");
    });
});

score 1 · Answer 5 · edited May 23 '17 at 12:24

Not sure if anybody is reading this question anymore, but I recently had a similar issue with Safari, so I thought I'd share.

First, as ceejayoz mentioned, see the discussion here: In JavaScript can I make a "click" event fire programmatically for a file input element?

The solution, then, if you do not want to use button positioning, is to display the file input button (remove the "display:none;") and instead hide it using "opacity:0;". You probably also want to absolute position it so it doesn't interact with other elements. Anyway, this way you can still use JS to activate the file input in all browsers.

noypiscripter · Answer 6 · 2014-07-22T22:25:39.900

1

.click() is not supported in Safari. Sattu's suggestion should work. But you don't need Javascript for customizing input file button.

<label><input type="file" id="file" name="file" style="position:absolute; left:-9999px;" />Upload</label>

Reference: http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html

edited Jul 22 '14 at 22:25

answered Jul 22 '14 at 22:10

noypiscripter

1,451
1
13
13

score 1 · Answer 7 · edited May 23 '17 at 12:30

1

Browsers can be very finicky when it comes to JavaScript interactions with file inputs, for security reasons. Safari prevents you from firing any click events on them. Some versions of Chrome and Firefox also have this restriction. This has been previously discussed here.

edited May 23 '17 at 12:30

Community

1
1

answered Jan 19 '12 at 15:12

ceejayoz

176,543
40
303
368

score 1 · Answer 8 · answered Feb 12 '12 at 09:42

1

Its better to use CSS instead of JS to hide element because it will render your element as hidden directly.

answered Feb 12 '12 at 09:42

Trython

101
1
2

score 0 · Answer 9 · answered Jan 17 '14 at 05:59

0

I got the simplest answer for this

opacity : 0.01 on your input file element

answered Jan 17 '14 at 05:59

eighteyes

1,306
1
11
18

score 0 · Answer 10 · answered Jul 30 '15 at 10:29

0

simply remove "display:none" and use "visibility:hidden" and works cross browser.

answered Jul 30 '15 at 10:29

PIYUSH JAIN

1

score -1 · Answer 11 · answered Feb 23 '13 at 01:28

-1

Try loading your script in the footer. I had a similar problem a few times and that did the trick.

answered Feb 23 '13 at 01:28

Susan

11

Jquery trigger click not working on safari browsers in mac, Ipad & Iphone

11 Answers11

Linked