Detect if file input dialog is open

Question

How can I find out if the file input dialog is open?

I am trying to integrate some file upload functions into a pop-up model (bootstrap style) in the web application that I am creating. As part of the model’s behavior, if a button is pressed, the model closes.

This is all good until I open the file input dialog box from the open model, if I remove the run to close the input dialog box, it will also close the model.

Super simplified version of what I'm trying to achieve http://jsfiddle.net/ckevy/1/

Answer 1

Try to solve it as follows:

When the user clicks on the file selection input, set its focus: $(el).focus() .

Then, anytime the user presses ESC, see if the $ (': focus') element is a file selection element. In this case, blur () introduces and does not close the modal. Worst case - the user wants to close the modal, presses ESC and nothing happens [1]. Thinks "wtf", presses ESC again and closes modally, as it should. Just make sure that the input for selecting the file is focused in all possible cases - using tabs, etc. If you use a third-party loader, and what I said does not work - look how this loader wraps the file selection in a custom link or button and what actually receives the click event in different cases (for example, when you insert a tab, you can get an event when you click, it could be a link). All in all, it is possible for this to work with the caution I described.

This works with extended ones that are too similar (just make sure the selection is not focused when ESC is pressed).

You will not be able to detect all cases when you need blur() input to select a file. This is not a cross browser solution. Even FF needs adjustments to work. I tested webkit with positive results, in other browsers it may not work.

Answer 2

I do not think that you have direct control over the dialogue itself. In some browsers, such as FF users, you can manipulate the dialog to some extent, but this does not apply to all browsers and all versions of the browser.

The easiest way to do this is to disable the shortcut in the model dialog before opening the file window.

Answer 3

In my case, this jQuery code works:

 // esc must close popup $("body").keyup(function(e) { if (27 == e.keyCode) { hidepopup(); } }); // input in popup var $file = $("input:file"); // keyup will be catched for input, not for body $file.bind("click", function(e) { $(this).focus(); }); // keyup catching will be changed back to body after selecting file $file.bind("change", function(e) { $(this).blur(); }); // we catched esc keyup, so change esc catching back to the body $file.keyup(function(e) { if (27 == e.keyCode) { $(this).blur(); // i don't know, why it works with return false, because i am not js programmer ), but cancelBubble or e.preventDefault is not working return false; } }); 

Answer 4

Based on Nikita's answer. If you check the focus on the input field before running the code, it solves the problem:

 $('input[type="file"]').on('keydown',function(e){ //Prevents code from firing if file browser is open if($(this).is(':focus')){ //run code here that should only be applied when the dialog box is closed } });