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!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

input type=file non-CSS friendly? 1

Status
Not open for further replies.
uladzik

uladzik

Programmer
Feb 12, 2001
55
BY
Recently I started painting my buttons. You know, something like this:
Code: 
<input type=&quot;button&quot; name=&quot;n1&quot; value=&quot;whatever&quot; style=&quot;background:lightsalmon;&quot;>[code]

But I noticed that upload form element is misbehaving.
if you use this code:
[code]<input type=&quot;file&quot; name=&quot;f1&quot; style=&quot;background:lightsalmon;&quot;>[code] 
will cause the placeholder for filename to become lightsalmon while the button &quot;browse&quot; stays gray. Any workarounds? It really spoils ALL of my Web-site. Imagine there 100 salmon buttons, and one is gray! ;)
Thanks in advance!
 ---
[URL unfurl="true"]http://www.geocities.com/uladzik/[/URL]
---
 
Sort by date Sort by votes
i had the same problem recently and started an identical thread which went unanswered - perhaps it's just not possible ?

one possible solution which occurred to me was to not have an upload form but a normal form with a normal button ( which does behave with css ) and do it all with scripting - i think it can be done with vbscript?? - but that would not be a perfect solution and it's far too much effort just for a little button

my upload form was in a popup window whose sole purpose was the upload form so my solution was to tailor the rest of the form to fit in as much as possible with the ugly grey button.

if you do find a solution could you please post it up here
( i hate it when i can't do something!)

al
 
Upvote 0 Downvote
aljc, I believe your workaround (building your own button and text) is not feasible, because it poses serious security threats. That's why a very special control (type=file) was created. Imagine what you would do, if it were not the case. Here is one possible scenario:

Code: 
<body onload=&quot;steal()&quot;>
<form name=&quot;form1&quot; action=&quot;steal.asp&quot;>
<input type=&quot;text&quot; name=&quot;fileToSteal&quot; value=&quot;c:\windows\win.ini&quot;> <!-- or any other file that is usually present on Wintel platform and reveals info about the user or his comp. -->
</form>
</body>
[code]

and this goes into <head>:

[code]
<script>
function steal()
{
 form1.submit()
}
</script>
[code]

and in steal.asp you perform the upload of ANY file you chose!

See what can happen? That's why they created this type=&quot;file&quot; as the only means of choosing files from your hard drive. And you can not even set default value for it (otherwise you would perform the same trick I just demonstrated). So I guess this little gray &quot;browse&quot; button always stays intact. However sad it is for us, lovers of nifty design ;). ---
[URL unfurl="true"]http://www.geocities.com/uladzik/[/URL]
---
 
Upvote 0 Downvote
here you go guys, i made the button very ugly just so you can see it can be done:

<input type=file onchange=&quot;eros.value=this.value&quot; id=&quot;benluc&quot; style=&quot;display:none&quot;>
<input id=eros>
<button onClick=&quot;benluc.click()&quot; style=&quot;background-color:red;border:1px solid #336699;cursor:hand;color:white&quot;>Try This!</button> jared@aauser.com -
 
Upvote 0 Downvote
It's not working in IE5 and IE55
I understand the trick is that you make browse button invisible and you make another button that generates a click on browse button and calls the dialog, but it doesn't populate &quot;file&quot; textbox. I think it's for security reasons that ULadzik explained. And I don't understand who would rate your post helpful - because it doesn't solve the problem.
---
---
 
Upvote 0 Downvote
I tried your code. Apparently &quot;benluc.value&quot; contains the correct file name that you choose (e.g. &quot;c:\autoexec.bat&quot;) but this value is NOT displayed in the filename textbox. So you can't provide such &quot;semi-working&quot; version of the control for the users, can you?
---
---
 
Upvote 0 Downvote
still not sure what you mean. in IE5.5 my button is working fine. you cannot type in it, but you can select a file and it places it in the input box... wierd... jared@aauser.com -
 
Upvote 0 Downvote
Dear Jaredn, I tried the code on IE 5.0 on Win98 (my desktop) and Win95 (my notebook) several times. I clicked on the red button &quot;Try this&quot; and the dialog box for browsing your computer appears correctly. Then I choose some file (c:\x.xxx). The dialog box closes but the text box stays empty (the placeholder where the filename should have appeared). I click on &quot;Test Input Value&quot; and it gives me alert with &quot;c:\x.xxx&quot; correctly. And right now I tested it in Netscape6 - it doesn't work there at all. Neither button doesn't react to clicking on it. So that's the situation for now.

---
---
 
Upvote 0 Downvote
hey rydel, you're allowed to think by yourself you know

-> the value doesn't display ??? what prevents you from setting it (yourbox.value=thehiddenfile.value) ?? it's not the correct one that is displayed ? what prevents you from testing ? are you wainting for us to go and think for you ? can we get your wages then ?

 
Upvote 0 Downvote
> hey rydel, you're allowed to think by yourself you know

Iza, have you look at the code at all?! It already does this (onchange=&quot;eros.value=this.value&quot;) but it doesn't work (doesn't display, to be more precise). Have you tested the code? I did and I tell you the outcome - it doesn't work in NN4.7, NN6, IE5.0 (on Win95 and Win98). Perfect solution, huh? I believe Jaredn that it works on IE5.5 but that's not good enough for a publicly accessible Web site.
---
---
 
Upvote 0 Downvote
i don't say it's a perfect solution you're given here
i say those are general guideline, and you should be smart enough to adapt it to your particular case. If you enconter troubles, then we can help - if we don't get insulted.
If you want the perfect working code, i can send it to you, but i want to be paid what you earn for this.
 
Upvote 0 Downvote
i was just pointing the fact that you seem to be here to ask for perfect answers, and complain when they're not exactly what you wanted them to be; and trying to explain that it is not the best attitude
i'm not insisting it can be done, i'm saying you don't give the impression of having worked a lot on the given solutions - it sounds you just copied/pasted the code and &quot;oh it's not working, let's complain and cry on tt&quot;
maybe you worked a lot and it only APPEARS you're just waiting ... in which case i'm sorry
 
Upvote 0 Downvote
Iza, thank you.

Rydel, I am not saying you can dynamically adjust the value of the box itself, only of a placeholder field to show the user what they chose. Perhaps try writing this to a div instead and try storing the value in a variable and then put it in there, or document.write. You obviously cannot change the actual field, but you should be able to display its value something (since it is being alerted, it is returning a string.) Oh yeah, I didn't really take offense to this, maybe I just read it sensatively :) jared@aauser.com -
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
998
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
560
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
456
PeDa
PeDa
Mackeinath
  • Locked
  • Question
Xml file import
Replies
0
Views
434
Mackeinath
Mackeinath
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
559
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top