2

This question is fundamentally different from Programmatically trigger “select file” dialog box because the latter involves User Action on DOM elements. The question here is how to trigger an input file without user action...

So as I was working on my AngularJS project, I noticed a peculiarity of the file input field... I have it with visibility hidden on my page and generally triggered it with the JQuery trigger function ($("#random").trigger('click')) when the user clicked on other DOM elements.

Now, there is a peculiar instance when I want to open it automatically on page load after retrieving some data from the servers.. more as a shortcut for the user's sake, once the page has only that purpose in mind. So after receiving the callback results, I trigger it with the same JQuery trigger function. But it does not work.

So.. I figure it is only possible to trigger a file input by clicking programmatically/manually on another DOM element but not by solely programmable means?

Is this some browser security restriction or does someone have a workaround? I have tried a little bit of everything, including Timeouts...

Not that I REALLY need this functionality, actually it would be less 'spammy' w/out it, but more as a professional curiosity on the matter.

Cheers.

M

Mateo Marin
  • 265
  • 3
  • 8
  • 2
    It's not possible in most browsers. In short, the browser keeps track of whether or not your currently running thread was initiated by a user action and if the event is trusted. Based on it, it allows or disallows certain methods. Opening an input file dialogue has to be triggered from a user action (most browsers accept programmatic clicks on hidden file inputs if they are triggered from a onclick event on a different form element and the `isTrusted` of that event is `true`. – tao Aug 04 '18 at 21:39
  • Thanks @AndreiGheorghiu, I was suspecting that was the case! Cheers – Mateo Marin Aug 05 '18 at 14:25
  • 1
    @georgeawg, I nominate this question for re-opening. The one which this one was marked a duplicate of **does not answer the question asked here**. It does not state in clear that **it is impossible to open a file selection input without user interaction** and that is what this question asks and the answer it deserves. – tao Aug 05 '18 at 19:09
  • The [second highest voted answer](https://stackoverflow.com/a/21583865/5535245) does indeed answer the question: **Yes, you can programmatically click the input element using jQuery/JavaScript, but only if you do it in an event handler belonging to an event THAT WAS STARTED BY THE USER!**. [From review](https://stackoverflow.com/review/reopen/20502319) – georgeawg Aug 05 '18 at 22:18
  • @georgeawg I understand. But the question asked is not the same as mine. The fact that the second highest voted answer ended up answering my question as a bonus is more of a lucky coincidence.. My only interest here is for other users that may have the same question as I did and may not see that detail in that answer for the other question. Id rather them see Andrei's response right off the bat. Cheers – Mateo Marin Aug 06 '18 at 04:05
  • 1
    @georgeawg first of all, you marked the question as duplicate. It is not duplicate. The other question is How to open a file input from a hidden element. This one is how to open one without user interaction. If you really believe they're the same question, maybe you should refrain from abusing your AngularJS tag (wrongly applied here, as AngularJS doesn't influence this) into closing questions on HTML and browser standards in handling JavaScript events. – tao Aug 06 '18 at 22:13
  • 1
    An unaccepted answer on a related question which appears better suited for this one than its own still **does not make this question a duplicate of the other**. The least you could have done was to point out the answer you referred to (by linking it) and, IMHO, you should have done it when you closed the question, not after it was nominated for reopening. – tao Aug 06 '18 at 22:19

1 Answers1

0

File inputs are commonly hidden and clicked with Javascript when another aesthetically better-looking button is clicked. The upload file dialog can only be opened via a user interaction, like a click on another DOM element. Thus, clicking on a file input on page load does nothing. Internet Explorer supposedly supports opening the upload file dialog on page load, but other browsers do not.

<input type="file" style="display: none;">
<button onClick="showUploadDialog()">Upload File</button>
<script>
function showUploadDialog(){
  document.querySelector("input[type=file]").click();
}
</script>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
  • Thanks, but that does not answer the question.. The debate was never about methods to trigger input files with User action involved. – Mateo Marin Aug 05 '18 at 14:37