Javascript Intercepted "ctrl+o" Does Not Open My File Dialog

I have an file-browser input in my HTML. I have another button with ID choose-file-button that, when clicked, calls document.getElemen

Solution 1:

There's some browser security magic going on here. When using timeouts or intervals or any other methods I try, the code carries on as normal but the browser simply refuses to open a file upload dialog. This is probably deliberate, to stop malicious JS from trying to grab users' files without consent. However, if you bind to a click event on a link, it works perfectly using jQuery or regular JS.

Edit: As suspected, most browsers keep track of whether an event is trusted or not based on the type of event and whether it was created by the user or generated programmatically. Se this answer for the full details. As you can see, since keyboard events aren't in the list, they can never be trusted.

Test JSFiddle

<form action="#" method="post">
    <div><inputtype="file"id="myfile"name="myfile" /><ahref="#"id="mylink"accesskey="o">Click me</a></div>
</form>

$("#mylink").click(function () {
    $("#myfile").click();
});

$(window).bind('keydown', function (e) {
    if (e.ctrlKey || e.metaKey) {
        switch (String.fromCharCode(e.which).toLowerCase()) {
            case'o':
                e.preventDefault();
                console.log("1a");

                $("#myfile").click();
                //alert("hello");console.log("1b");
                returnfalse;
        }
    }
    returntrue;
});

I think there are only two options here, and they're both workarounds, not solutions.

• One is to use a link to trigger the file upload dialog, and ask people to use ALT+SHIFT+O instead of CTRL+O (because I added an accesskey attribute to the link in the example).
• The other alternative is to use one of the new HTML5 JavaScript APIs for drag-drop file uploading.

Addendum: I also tried using pure JavaScript in Firefox to grab a click event and check to see if it's trusted using the isTrusted property. For the clicks on the link, it returned true. However, attempting to store and re-use the event elsewhere doesn't work, because it's already been dispatched by the time you get a reference to it. Also, unsurprisingly, creating a new event and attempting to set isTrusted = true doesn't work either since it's read-only.

Solution 2:

Browser map many Ctrl+ shortcuts to own commands, for instance CTRL+O to open a file (in firefox).

On the same time browser behave different when you try to override such shortcuts in javascript. Some browsers allow you to do so, some don't, and sometimes the default browser action may pop up together with the action of your javascript.

Here is another thread discussing this topic.

Probably the best you can do is to choose a different shortcut.

Solution 3:

You can try with Mousetrap library. It overrides the most problems that key capturing makes. Official website and complete refference:

https://craig.is/killing/mice

Good luck

Solution 4:

You cannot do that in all browsers, as far as I am concern only IE allow it. I guess this is due to security issues, so that programmer are disabled to set the file name on the HTML File element automatically(without permission of client).

have a look on this link for more details:

In JavaScript can I make a "click" event fire programmatically for a file input element?

Show input file dialog on load?