input type=file click not triggered when called from anonymous function

Question

I am running into a weird problem. Not sure if it is due to the security concern of any other reason. I have following piece of code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button onclick='someThgTemp()'>TRY</button><br /><br /><br /><br />
<label id='labelId' for='some'>sdfasdf</label>
<input id='some' type='file'/>
</body>
<script>
var someThg = function someThg(){
alert(2);
console.log(document.getElementById('labelId'));
  document.getElementById('labelId').click();
}

function someThgTemp(someThg){
alert('1');
var that = this;
  window.setTimeout(function(){

  that.someThg();
 }, 3000)

alert(3)

}
</script>
</html>

So on this line:

<button onclick='someThgTemp()'>TRY</button>

the file chooser dialog is not shown

Where as if I change the above line to following

<button onclick='someThg()'>TRY</button>

The file chooser is called.Please let me know what I am doing wrong and what is the alternative for it.

The reason to do this being, before showing the file browser I need to validate something. If validated then only I want to show the user file browser.

If I am not wrong, you are clicking on the label instead of input? And you are screwing up `this` and `that`? — Praveen Kumar Purushothaman, Oct 06 '16 at 10:03
No . Thats not the issue. Even If I trigger click on input also it wont work. Since the type="file" — Nitin Mesta, Oct 06 '16 at 10:04
@NitinMesta Works perfectly in my answer. Check it out. Let me know if you cannot use this for some reason, would love to debug more. — Praveen Kumar Purushothaman, Oct 06 '16 at 10:07
@NitinMesta Works in both the anonymous function as well as timer function as well as button click function. — Praveen Kumar Purushothaman, Oct 06 '16 at 10:09
Just curious to know, if you are able to achieve what you wanna get by running the two snippets in my answer? — Praveen Kumar Purushothaman, Oct 06 '16 at 10:14

Luca Rainone · Answer 1 · 2016-10-06T14:18:53.650

1

For security reasons you can not trigger manually a click event that open popup or open a dialog file in asynchronous call with too much delay (setTimeout use after 3 seconds). The user must associate directly the click to the event that you want that happens.

Try to set 1000 milliseconds instead of 3000. (and delete all alerts)

edited Oct 06 '16 at 14:18

answered Oct 06 '16 at 10:06

Luca Rainone

16,138
2
38
52

score 0 · Answer 2 · answered Oct 06 '16 at 10:07

0

I guess you are messing up with this and that. I would go ahead in this way:

window.onload = function () {
  theBtn = document.getElementById("myBtn");
  theBtn.onclick = function () {
    theFile = document.getElementById("some");
    theFile.click();
  };
};

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="myBtn">TRY</button>
<br />
<br />
<br />
<br />
<label id='labelId' for='some'>sdfasdf</label>
<input id='some' type='file' />

Using a Timer - Browse window comes after a second.

window.onload = function () {
  theBtn = document.getElementById("myBtn");
  theTimeFunc = function () {
    theFile = document.getElementById("some");
    theFile.click();
  };
  theBtn.onclick = function () {
    setTimeout(theTimeFunc, 1000);
  };
};

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="myBtn">TRY</button>
<br />
<br />
<br />
<br />
<label id='labelId' for='some'>sdfasdf</label>
<input id='some' type='file' />

answered Oct 06 '16 at 10:07

Praveen Kumar Purushothaman

164,888
24
203
252

Try to set 3000 on timeout instead of 1000, in your code – Luca Rainone Oct 06 '16 at 10:15
@chumkiu Eh... It doesn't work. `:o` – Praveen Kumar Purushothaman Oct 06 '16 at 10:16
it's the same problem of OP. Its code is right, the problem is only on delay after the user interaction – Luca Rainone Oct 06 '16 at 10:17
@chumkiu Do we have any solid reason? But we can do it using multiple timeouts. Or chaining functions or callback functions. – Praveen Kumar Purushothaman Oct 06 '16 at 10:18
My Firefox says that has prevent a popup open. So I think it's a rule of anti popup. The same happens with window.open. However I have no reference ready to link now. Just experience. If I found something i would happy to post it – Luca Rainone Oct 06 '16 at 10:22
@chumkiu Na... This is not related to popup... This is a crazy security ****. – Praveen Kumar Purushothaman Oct 06 '16 at 10:23
That's what firefox explicity says. – Luca Rainone Oct 06 '16 at 10:27
@PraveenKumar as chumkiu said if the time out is more then call is not triggered. Do you guys have alternative solutions? as the code I had pasted above is just a sample and my actual anonymous function may take more time in real as there will be user interaction. Please suggest – Nitin Mesta Oct 06 '16 at 10:40
1

@NitinMesta Chaining timeouts... `:D` – Praveen Kumar Purushothaman Oct 06 '16 at 10:46
But I cannot do that. I have a Helper method call which will handle the thing and call my callback once done :P – Nitin Mesta Oct 06 '16 at 11:06
before `theFile.click()` row, add `var d = +new Date(); while(+new Date() - d <= 2000) {};`. But I've never say that. – Luca Rainone Oct 06 '16 at 11:16
@chumkiu ... And screw up the browser. :D – Praveen Kumar Purushothaman Oct 06 '16 at 11:37

input type=file click not triggered when called from anonymous function

2 Answers2