Input file, click no working.. No event

Question

I have a problem, generate an input file type, the click event does not work. Input generate in HTML works natively clicking, or Click events on jquery or more. But when I try something like ..

$('body').append('<input type="file" id="asd" />')

None of these works, and even doing click natively, does not work, it appears, but it seems to not have any events.

document.getElementById('asd').click()
$('#asd').click()
document.getElementById('asd').dispatchEvent(new Event('click'));

That may be happening? It does not work in Chrome or Firefox ...

Even running these commands in Stackoverflow this does not work, so it can not be...

Sorry for my english.

you can use document.getElementById('asd').trigger("click"); — Harsh Sanghani, Nov 25 '15 at 08:45
`$('#asd').trigger("click");` does not work. And do not want to create a event, I want to make the user select a file browser natively. :( — Aitor Chicharro, Nov 25 '15 at 08:49
Please have a look at this https://jsbin.com/ruyocivuru/1/edit?html,css,js,output — Sumit Surana, Nov 25 '15 at 08:50
I think that for security reasons, this will only work on locallhost — Kaiido, Nov 25 '15 at 08:59
@AitorChicharro Triggering file input click has some constraints. Check this out http://stackoverflow.com/questions/29728705/trigger-click-on-input-file-on-asynchronous-ajax-done/29873845#29873845 — tkay, Nov 25 '15 at 09:01
@Kaiido that's make no sense. Trigger click in an input file works perfectly in a server. Normally, for security reasons don't work in localhost, it's the opposite as you said. — Marcos Pérez Gude, Nov 25 '15 at 09:04
@tkay Mm .. the problem then is that I can not call an input directly, without user interaction, to make it another button.. — Aitor Chicharro, Nov 25 '15 at 09:07
@MarcosPérezGude It's not coherent across browsers, but try it in FF and you'll see that `input.click()` does work there. Not sure what the specs tell about it. But I can't see the logic of being more restrictive in localhost. A lot of features are less restrictives in localhost (which is still a server btw, I'm not talking about the file:// protocol). — Kaiido, Nov 25 '15 at 09:10
Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/96160/discussion-on-question-by-aitor-chicharro-input-file-click-no-working-no-even). — elixenide, Nov 25 '15 at 15:10

score 2 · Answer 1 · edited May 23 '17 at 11:51

2

Its not possible to emulate a file input click event without a user action. If you want to hide the file input then you'll have to add a button for the user to click.In its click event you should emulate the file input's click event. In other words if you are trying to trigger a file input click from an event which is not trusted by the browser then the click wont work. Check this question and its answer. Trigger click on input=file on asynchronous ajax done()

$('body').append("<input style='visibility:hidden;' type='file' id='asd'/><button id='trigger'>trigger file input</button>")

$('#trigger').on('click',function(){$('#asd').click()});

#trigger{
background:red;
  color:white;
  padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited May 23 '17 at 11:51

Community

1
1

answered Nov 25 '15 at 08:54

tkay

1,716
14
18

If it works, but if not called from the button, because it does not work? That is, for example, with a timeout of 1s, and then click ... `setTimeout(function(){ $('#asd').click(); }, 1000)` – Aitor Chicharro Nov 25 '15 at 08:58
@AitorChicharro file input wont work after 1000ms. As previously answered by me . Check this out . http://stackoverflow.com/questions/29728705/trigger-click-on-input-file-on-asynchronous-ajax-done/29873845#29873845 – tkay Nov 25 '15 at 09:00

FelixHo · Answer 2 · 2015-11-25T08:55:55.797

1

The problem is that the second "input" element is added dynamically and the click binding happens before the second "input" element exists. That's why it has no affect on it.You can attach the handler to each anchor before you insert it.

try this code to bind your click event:

$('body').on('click', '#ads', function(e){
    ...
});

btw, give your input element a class name is better , and bind the click event with class name like '.class'

edited Nov 25 '15 at 08:55

answered Nov 25 '15 at 08:50

FelixHo

1,254
14
26

And do not want to create a event, I want to make the user select a file browser natively. My input will be hidden and then call click event in jquery want to do or something similar. I do not know if I explain myself :( – Aitor Chicharro Nov 25 '15 at 08:54

score 1 · Answer 3 · answered Nov 25 '15 at 09:17

File input can't be automatically clicked without any user interaction due to security purpose. It will be very crappy if a page activates anything itself when the page loads.

You can use label to click file input by user like following.

$('body').append('<input type="file" id="asd" /><label for="asd">Click</label>');

score 0 · Answer 4 · answered May 05 '21 at 16:17

0

You can't click on an appended element without calling the click event like this:

$(document).on('click', '#asd', function() {
      // This will work!
});

answered May 05 '21 at 16:17

Ardit Maloku

1
1

Input file, click no working.. No event

4 Answers4