When clicking on the text box part of an <input type="file" /> in FireFox3, a file browsing window opens.
This doesn't happen in IE7. You have to click the "browse" button to open the file browsing window.
How can I prevent the file browsing window from opening in FireFox when a user clicks on the textbox area? I'd like it so it only opens when the button is pressed.
Why can't you leave expected behavior alone? Most people who use FireFox will expect it to happen. Unless there is an actual "design" reason that you did not state for making this happen please don't try and change it.
Even if you really would want to do that, i don't think it is possible.
Firefox behaves this way in order to prevent an exploit using the file input.
See the end of this blog entry and some of the comments below.
I agree that it is very annoying, not as a website designer/developer but as a user of Firefox; sometimes I just want to paste a filename and not have to click through the dialogs.
Yes it does, and there's nothing that a webpage can do about it.
I'm not aware of a FF config setting that would control this, so you're stuck with #3:
With an extension it might be possible to change this behavior, but then you'd have to get your users to install your extension (may be feasible for an internal app) and cope with the bugs it might introduce into the application.
How can I prevent the file browsing window from opening in FireFox when a user clicks on the textbox area?
Obscure it with another element.
<div style="position: relative">
<input type="file" />
<div style="position: absolute; top: 0; left: 0; width: 11em; height: 2em;"> </div>
</div>
But don't do this. It's awfully brittle and will break in many circumstances.
I'd like it so it only opens when the button is pressed.
I doubt your users would like it, though. It removes expected functionality from the browser, and doesn't replace it with anything better. Or indeed anything at all.
Yeah i have the same problem too, i'm building a cool upload control, and i want it to do that : - the user can upload anything when he browses his hard drive and upload - when the user types something that begins with "http://", a popup appears and ask him to name the hyperlink, and then a .url is created among other uploads. It's nice you can do that with a simple file upload with IE, but Firefox prevents it and it sucks.
Unfortunately it is impossible to do that with FF, so i guess i have to roam throught something else, but it is a shame, and for me, it's clearly a limitation since the security/privacy upload problem is the same with IE or Firefox.
Would a simple workaround not be to create a text input field and also a button, with the button being used to trigger the file browser and then populate the info back into the text field? I'm fairly new to all this and am reading a lot of issues on this problem, including the fact that FF3 doesn't apply the same css styles to the input=file as it did in previous versions.