View Full Version : Simulate click on "Browse" button

03-15-2005, 12:09 PM
I am trying to simulate a click on the browse button of a file upload field (input type="file").

After a long search, i've found the createElement function, which, if i understand correctly, is the "official" cross-browser solution.

This is the code i've written
function BrowseClick()
var ClickBrowseButton = document.createEvent("MouseEvents");
ClickBrowseButton.initEvent("click", false, false);


As far as my understanding goes, this code is correct. It does not give me javascript errors. However, nothing happens. I also tried to use getElementById, but the result was the same.

Does anyone have any idea how to get this working?


03-15-2005, 01:52 PM
After a long search, i've found the createElement function, which, if i understand correctly, is the "official" cross-browser solution.

Did you mean createEvent?

Since IE6 implements <= DOM level 1, it wouldn't be cross-browser in that respect. Besides, if the click() method doesn't work, then workarounds would probably be blocked as well...

03-15-2005, 02:02 PM
Yup, i meant createEvent, as shown in my code example.
And it is in no way meant to run in Interweb Exploder, since IE doesn't even appear to support javascript, not even at the lowest security setting...

Besides, the site is a php-client to the nzbqueue daemon, which only runs on unix, so i don't think many people will want to run the page in IE :thumbsup:

i just found out that createEvent does not simulate clicking, but only calls the onclick function of the given element, and that does work...

So i probably had too high an expectation of the createEvent function. Isn't there a function that simulates a mousebutton click?

03-15-2005, 02:21 PM
There might be a method (mentioned somewhere around here)... ;)

03-15-2005, 02:41 PM
There is only an IE solution posted, but that is of no use to me.

03-15-2005, 02:44 PM
The method may very well be disabled for input/file, however it is supported by browsers other than IE.

03-15-2005, 02:56 PM
OK, i think i'll just have to accept that this is not going to work, and try an alternate route.

My backup plan is to position the "Browse" button exactly under the "fake button" so that the click bubbles through. However, the problem is that i can't even set the width of the darn thing, and every browser has a different size box :mad:

Is there then perhaps a way to make sure the box is at least positioned correct?

03-15-2005, 03:07 PM
There's very little you can do about this - you certainly can't send events to the button or replace it with something else. With any other kind of form element it wouldn't be a problem (and btw, "dispatchEvent" is what you originally wanted) but file inputs have very strict security restrictions, to stop them from being misused.

But a combination of the "size" attribute (which for some reason is the only thing FF listens to) and a CSS width property (which equates to the overall width, including the button) should be enough to at least make it the right size for its space.

03-15-2005, 03:12 PM
Yeah, i already noticed the size part, i've set it to 1, since 0 resets it to default.

However, the CSS width property doesn't work for me. If i set the width, all it does is move the object to the right, instead of making it smaller, like i want to. :mad:

03-15-2005, 10:56 PM
OK, i'm almost there! I had the idea to wrap the button up inside something i could style, so i could at least set the dimensions, and then put something over it.

As it turns out, the only thing strong enough to control a input/file is a(n) (i)frame. So i copied the form into another page, and created an iframe. I can now even use the -moz-border-radius to make round corners!

All nice and well, but i wouldn't write this if all was complete well. The iframe containing the input/file is supposed to target yet another iframe, however it loads in the main page. I have tried target="parent.upload_frame" but this does not work. When the form was in the main page, it used to work with target="upload_frame"

Another thing i have trouble with is getting the button in the right place. For some reason the button seems to dislike all the other buttons and keeps it's distance. Anyone have any idea how to stop it? I rather not use absolute positions for this, but i will if it's the only choice.

Thanks in advance, and sorry for the long post.