Input type=file - disabling user input 1

[Helen267]

I couldn't find the answer to this question using search.

I would like to use an input box with a type of file, which users will then use to upload a file. But I also want to disable the text input, so they can ONLY use the browse button to select a specific (existing) file, rather than typing "I don't have a file yet" which causes the form to fail! Is there any way to do this using the INPUT tag, or should I write some javascript to achieve this?

Thanks in advance for your help.

 

[vacunita]

Isn't this already the default behavior. At least in FF 3 and IE8, you can't actually type anything into the text box for the file input type.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Helen267]

This is for our Intranet site, and we're still using IE7 as standard. We won't be upgrading for a while, so I would like to find a solution, if possible.

 

[vacunita]

You may be able to use the readonly attribute:
<input type=file readonly="readonly">

Other than that, yes you'll need javascript.
Something like:

<input type=file onKeyPress="this.value='';">
So you keep the value empty every time they try to press a key to type in it.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Helen267]

Readonly disables the Browse button, but the javascript you suggested might be the answer I'm looking for. And a lot easier than what I was thinking. Thanks!

 

[BillyRayPreachersSon]

I don't know this for sure, but wouldn't it be possible to detect the missing file server-side, and do nothing?

If so, surely this would be a far better approach than trying to "hack" the input box client-side?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisHunt]

I think you'll find that Javascript access to <input type="file"> elements is severely limited. In particular, don't think it's possible to manipulate the value in any way.

This is for security reasons - otherwise a hacker could put a file control in some otherwise innocent form - a site search form, say - make it invisible with CSS and populate it with the name of a file that he wanted from your hard drive. Then people would unknowingly send that file each time they use the form.

So the only way to get a filename into a file control is for the user to type or select it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[feherke]

Hi

don't think it's possible to manipulate the value in any way.

Setting [tt]value[/tt] to empty string, as done in Phil's code, is an exception and is allowed in Mozillas. Not tried in other browsers.

Feherke.

http://free.rootshell.be/~feherke/

 

[Helen267]

Unfortunately the code suggested by vacunita didn't work, but I did find the answer on another forum:

<INPUT TYPE="file" NAME="filename" onKeyDown="this.blur()" onContextMenu="return false;">

 

[vicvirk]

could have also done this:

<input type="file" onkeydown="return false;" />

--------

GOOGLE is a great resource to find answers to questions like "how do i..."

http://www.google.com/webhp?complete=1&hl=en

--------