click event triggering on input type="file" is not working

Question

/note: this only applies when used on the specified domain, but works practically/

I've been trying to simulate a mouse click event, it works for anything else but not for this..

I tested it, it is working now somehow.. but whenever I try to run on this website: http://www.multiplayerpiano.com/ it seems not to work...

<input type="file" id="_LOAD" accept="mp3" />

$('#_LOAD').click();

this doesn't work..

I've also tried

$('#_LOAD')[0].click();

no luck..

can anyone please explain what is it that is blocking it on That specific domain?

// edit - original code

I was trying to make a function which will allow me to make file dialog box's which only allows a specific mime type to be allowed

var load = function(mime,callback){

    var tempmime = (mime) ? mime : "";

    var tempinp = $('<input style="position:absolute;opacity:0;z-index:-1;pointer-events:none" type="file" id="_LOAD" ' + (tempmime == "" ? "" : 'accept=".' + tempmime + '"') + '/>')

    $("body").append(tempinp);
    $(tempinp).focus().click();
// 
    var aab = function(msg){
    callback(msg);
         $(tempinp).off('change',aab);
        $(tempinp).remove();
    };
    $(tempinp).on('change',aab);
}

So this is as far i have got without .click working.

http://jsfiddle.net/arunpjohny/nxzsqdho/1/ - I think the browser is blocking the default behavior if the click is triggered from a non user initated method — Arun P Johny, Sep 22 '15 at 13:52
http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input — epascarello, Sep 22 '15 at 14:30

score 2 · Answer 1 · answered Sep 22 '15 at 14:25

2

can you try

  $("#_LOAD").trigger('click');

answered Sep 22 '15 at 14:25

Vikas Kad

1,013
1
18
38

can you try with variable name like $(tempinp).trigger('click'); – Vikas Kad Sep 22 '15 at 14:35

mayo · Answer 2 · 2015-09-22T15:12:36.340

1

try this:

document.getElementById("_LOAD").click();

Also you can check if you are selecting elements with

console.log("Element exists : " + (document.getElementById("_LOAD") != null ) );

edited Sep 22 '15 at 15:12

answered Sep 22 '15 at 13:59

mayo

3,845
1
32
42

`document.getElementById()` returns a unique element. Also, the `` element as no `length` property. – Kaiido Sep 22 '15 at 15:09

click event triggering on input type="file" is not working

2 Answers2