3

I want to open the file dialog box programmatically when the user press a key. I have grabbed some solutions in thess answers but none of them seems to work with Firefox.

My fiddle is here : simply press the Spacebar to open the file picker (after 1 click on the 'Result' section)

As you can see I have tried some functions to simulate click : 'eventFire' (or more simply el.click();) works with all browsers except FF, but 'simulateClick' wich comes from MDN doesn't work with FF (?)

  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  el.dispatchEvent(event);

May be is it due to the fact that el is an input ?

How can I achieve this in FF ?

Community
  • 1
  • 1
jeum
  • 1,048
  • 3
  • 13
  • 29
  • 1
    Fiddle works as it is in FF 32.0.1. – tiblu Apr 14 '15 at 13:26
  • You mean that the 'I' key opens the dialog box ? That doesn't with FF 37.0.1 / Win7 – jeum Apr 14 '15 at 13:38
  • Updated FF to 37.0.1 and now "I" stopped working. The "I" did work in the FF 32.0.1 – tiblu Apr 14 '15 at 13:42
  • Added more tests here - http://jsfiddle.net/wopt3f7d/1/ Seems that if I call the ``simulateClick`` in a link element click handler, it does open the dialog but for some reason not with "I" key. – tiblu Apr 14 '15 at 14:50
  • Ok, thanks for this try. In the wake I have tried to change the handler syntax (replace by 'document.onkeypress') [here](http://jsfiddle.net/jeum/wopt3f7d/2/) but that doesn't work. Note that the keypress event is triggered, you can turn '105' to '97' for example and press the 'A' key ... So the problem comes from the 'simulateClick' function that doesn't seem to work in a keypress handler (?) – jeum Apr 14 '15 at 16:53

1 Answers1

0

This use case is hitting security restrictions of modern browsers. They surely distinguish "human initiated" events from "artificial" ones and treats them differently when it comes to any spoofing concern. The event chain that browser watches and evaluates can be quite complex, so translating "real" click events and 'proxying' them works (user really clicked something, so it can mean that he intended to make some action), but proxying keyboard or other events to click is potentially dangerous and thus blocked. Have this simple document (you can copypaste it into URL): 

data:text/html,
<input id="f" type="file" onclick="console.log(this,'click')" onfocus="console.log(this,'focus')">
<p>
<button onclick="f.focus()">focus ^</button>
<button onclick="f.click()">click ^</button>
<script style="display:block">
console.log(f);
f.focus();
f.click();
</script>

If you trigger f.click() by clicking the button, it works. If you trigger it via console, onclick is fired but not the default action (no file picker is opened). Applies both for Chrome and Firefox. It it wasn't that way, you'd see file picker opened on the page load.

If you try similar experiment at the MDN example after you change the input's type from checkbox to file and invoke simulateClick() from console, you'll get the same outcome (both in Chrome and Firefox).

What seems like a bit of mystery to me is fact that your fiddle works in Chrome, although I'd expect it not to.

myf
  • 9,874
  • 2
  • 37
  • 49
  • Yes the thing is that [the upper fiddle](http://jsfiddle.net/jeum/cebm2shm/13/) works (Windows7) in Chrome, IE(11), Opera and Safari. That's why I was excluding security reason but I don't know .. – jeum Apr 14 '15 at 17:11