How to trigger a file browser from keyboard using java script or jquery?

Question

I am using below code to create a file upload control:

ASP code :

 <label for="imageFileUpload" class="file-button new-gradient " tabindex="0">
<span>
<%=(string.Format("{0}", (UploadedFiles != null && UploadedFiles.Count > 0) ? "Add Documentation" : "Add Receipt" %>
</span>
<asp:FileUpload ID="imageFileUpload" runat="server" type="file" size="10" CssClass="file-upload visually-hidden"`enter code here`
onchange="PerformUpload();" ClientIDMode="Static" />
</label>

the class new-gradient is used to add look and feel to default File browser button and label hides the default file browser button..

Javascript code:

$(function() {
    $("#imageFileUpload").on("keyup", function (event) {
         if (event.keyCode === 13) {
              $("input[type = 'file']").click();
         }
     });
});

I am able to set the focus on the button using tabIndex. When i use keyboard to access the button focus is present but the file browser is not opened. Nothing happens when i hit enter from keyboard. When clicked with mouse the file browser opens up and everything works properly.

I have followed what is suggested in this Link
Is it possible to use the keyboard to trigger a File Browser in JavaScript? but it was not able to solve my question.

Could anyone help me out. Thanks in advance.

Your event is attached to `$("#imageFileUpload")`, not `$(window)`. — StackSlave, Nov 02 '16 at 00:07
If i use $(window) object then the event gets fired when clicked anywhere on the screen — raj, Nov 02 '16 at 17:19

score 1 · Accepted Answer · answered Nov 02 '16 at 09:08

Your probleme here is that you are enclosing the FileUpload with the label tag (So when you try to access the fileUpload using the TAB key , the first it select first the label so the event wont be fired , if you click again to the tab it'll focus on the fileupload so the event is fired when you click enter)

Remove the enclosing label from the fileupload and it gonna work :

<label for="imageFileUpload" class="file-button new-gradient " tabindex="0">
<span>
<%=(string.Format("{0}", (UploadedFiles != null && UploadedFiles.Count > 0) ? "Add Documentation" : "Add Receipt" %>
</span>
</label> // put the closing label here , before Fileuplod asp tag .

<asp:FileUpload ID="imageFileUpload" runat="server" type="file" size="10" CssClass="file-upload visually-hidden"`enter code here`
onchange="PerformUpload();" ClientIDMode="Static" />

I think i am getting the focus on the FileUpload( that's when event is fired and working) but it's not visible as it is covered with a label. So how do i make the focus stay on label and get the event fired? — raj, Nov 02 '16 at 17:22

How to trigger a file browser from keyboard using java script or jquery?

1 Answers1