Looking for documentation that explains inputfile.click()

Question

I have an HTML5 input file called myfile. In the same file, I am using $("#myfile").click(); in a section of JavaScript. The $("#myfile").click(); is causing a file dialogue box to appear. This is working as expected, but I'm wondering:

where is this documented (that a dialogue box should appear if you’re issuing a statement like $("#myfile").click();), and
are there alternatives to having a dialogue box appear if I send in a parameter to the .click() function?

If you don’t want to activate the dialogue, why are you calling .click()? — Ry-
– Ry- ♦, Commented Jul 18, 2014 at 21:03
There's some HTML and CSS behind. I created this fiddle for another question, but you can see what is needed. If you use click method of input type="file", a dialog should be opened. — Teemu
– Teemu, Commented Jul 18, 2014 at 21:21
Minitech - Thanks for your comment. I'm just looking for any documentation that states that calling click() on a file will result in the dialogue box opening. That would be my first goal to accomplish. — the_rj
– the_rj, Commented Jul 18, 2014 at 21:21

pwdst · Accepted Answer · 2014-07-20 15:54:08Z

2

The HTMLElement.click() method simulates a mouse click on an element

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click

The HTML 5 Specification states-

element.click() Acts as if the element was clicked.

The click() method must run the following steps:

If the element is a form control that is disabled, abort these steps.

Run synthetic click activation steps on the element.

See the click method specification

The behaviour itself will depend on the element click on, the default behaviour by the user agent (browser) for a click on that element type (generally nothing, with the exception of input types) and any custom events the developer has added for the element.

To simulate a click event-

var domElement = document.getElementById(elementId);

if (domElement && typeof(domElement.click) === "function")
{
    domElement.click();
}

For some examples of how different elements respond (and that you can even trigger click event handlers by simulating the click event) see http://jsfiddle.net/pwdst/KGgXq/ for some examples.

In answer to your specific point/question regarding the file input, the HTML 5 specification for the element does state "activation behaviour" for a input element with type "file". This includes-

Display a prompt to the user requesting that the user specify some files. If the multiple attribute is not set, there must be no more than one file selected; otherwise, any number may be selected. Files can be from the filesystem or created on the fly, e.g. a picture taken from a camera connected to the user's device.

The specification states that this should only happen if the element is not disabled or read-only.

edited Jul 20, 2014 at 15:54

answered Jul 18, 2014 at 23:50

pwdst

13.9k4 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

the_rj Over a year ago

Pwdst, I tried to post a thank you yesterday but it doesn't seem like my comment stuck. This is the information I needed. I appreciate your efforts.

pwdst Over a year ago

@the_rj No problem, I'm glad you found it helpful. If the answer resolved your problem please consider accepting it (using the green tick on the left) to help future users who may have the same problem know what helped you.

Collectives™ on Stack Overflow

Looking for documentation that explains inputfile.click()

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related