CODEWITHSUNDEEP
jqueryiphoneipadsafariwebkit
Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

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

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?

Upvotes: 13

Views: 36787

Answers (11)

Sattu
Sattu

Reputation: 139

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);

Upvotes: 14

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

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.

Upvotes: 6

PIYUSH JAIN
PIYUSH JAIN

Reputation: 1

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

Upvotes: 0

noypiscripter
noypiscripter

Reputation: 1461

.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

Upvotes: 1

eighteyes
eighteyes

Reputation: 1314

I got the simplest answer for this

opacity : 0.01 on your input file element

Upvotes: 0

rajansoft1
rajansoft1

Reputation: 1356

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

Upvotes: 5

Sam Grondahl
Sam Grondahl

Reputation: 2467

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.

Upvotes: 1

Susan
Susan

Reputation: 11

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

Upvotes: -1

John Erck
John Erck

Reputation: 9528

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");
    });
});

Upvotes: 2

Trython
Trython

Reputation: 101

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

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 179994

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.

Upvotes: 1

Related Questions