input box type=file 2

YYYYUU · May 30, 2003

I have an input field and browse button created by

<input type="file" ......

I want the only option for the user to be to browse through directories to get the file, I do not want them to be able to type directly into the box. I've tried readonly and disable, but as well as not permitting the user to enter text, this disables the browse button.

Any ideas? Thanks.

greedyzebra · May 30, 2003

A problem a had verifying a file input box value may help here...

If you do not want a user typing into the text box, try this:

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

It might be onkeypress. Sorry I don't remember off the top of my head. But hopefully this will get you in the right direction.

The problem I had verifying the value of that field is that all other text boxes I was able to look at onkeypress (or whatever the event is) but I could not for the file input box because simply selecting from the dialog box that appears would not trigger the event.

Good luck.

EdwardMartinIII · May 30, 2003

What an interesting problem...

I solved it by placing a matching text box directly over the input file text box. I disabled the above-box and set its onFocus to blur(), so that it's pretty darn difficult to disable it.

A tricky part was determining when the browser "had" the file. At that point, I would copy the contents of the file field to the text field. Mozilla/Netscape doesn't seem to operate the same as IE. So, I have it triggering from pretty much any event that made sense and gave up worrying about excess copying (I don't see the difference, practically).

Of course, you're going to have to arrange the elements as you wish. I tried briefly to force DisplayData to appear at 0-px/0-px relative to GetData (which would mean you could put GetData anywhere and DisplayData would follow it like a puppy), but I couldn't figure it out easily. Maybe someone could add that bit of info after this?

You're going to have to add your own action, of course.

Because the file window is still there (just under another field), hitting [ENTER] will still process it as you would expect with a multi-part form.

Here's my listing. It works under IE and Mozilla. It passes the validation at W3C, too.

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <form name=&quot;ThisForm&quot; enctype=&quot;multipart/form-data&quot; method=&quot;post&quot; action=&quot;&quot;>
      <p>Please choose a file</p>
      <div id=&quot;GetData&quot; style=&quot;position: absolute; left 10px; top: 40px;&quot;><input type=&quot;file&quot; name=&quot;GrabbaFile&quot; size=&quot;60&quot; onchange=&quot;ThisForm.FileHolder.value=ThisForm.GrabbaFile.value;&quot; onclick=&quot;ThisForm.FileHolder.value=ThisForm.GrabbaFile.value;&quot;></input></div>
      <div id=&quot;DisplayData&quot; style=&quot;position: absolute; left 10px; top: 40px;&quot;><input type=&quot;text&quot; size=&quot;60&quot; name=&quot;FileHolder&quot; onfocus=&quot;ThisForm.FileHolder.blur();return false;&quot; disabled=&quot;disabled&quot;></input></div>
    </form>
  </body>
</html>

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

input box type=file 2

YYYYUU

Programmer

greedyzebra

Technical User

EdwardMartinIII

Technical User

Similar threads

Part and Inventory Search

Sponsor