Assigning class to "type=file" field - Almost there...

[Dominick]

Hi everyone:

I have seen a number of posts regarding the ability (or lack thereof) to assign CSS properties to the field <input type=file>. I have the same problem, and have tried a suggestion that was posted:

Create the <input type=file> field and hide it, then create a new text field and button that will pass the file path to the hidden field.

It appears to work in that I receive the email that is sent when submitting the form, and it has an attachment. The problem is that the attachment is nothing more than a blank .dat file.

I'm thinking that the problem is in the name of my text field, which is "*upld1"....Is it possible that the asterisk is causing a hangup? If so, is there something I can do to make the asterisk recognizable by the back-end? FYI - I've tried the forward slash
( "\" ) with no success.

Unfortunately I do not have access to the back-end of this form processor so I can't change the name of the field - it is what it is.

Any advice would be greatly appreciated. Here's my code - note that the visibility is on just to make things easy while trying to work this out.

Thanks,

Dominick


<table>
<tr>
<td align="right">Hide:</td>
<td><input id="real_01" onChange="document.getElementById('fake_01').value=this.value" style="visibility:show;" type="file"></td>
</tr>

<tr>
<td align="right">Show:</td>
<td><input class="textfield" id="fake_01" name="*upld1" size="49" type="text">&nbsp;<input class="button_b" onClick="document.getElementById('real_01').click()" type="button" value="Browse..."></td>
</tr>
</table>

[glenngv]

if you are just concerned on putting a style on the file input, I think it works. the file input in the Reply page of this forum has a class defined in it.

[Ökii]

have you tried the form processor first without the css trick to test it can and does upload .dat files correctly?

[Dominick]

Hi guys, thanks a lot for taking the time to reply.

Okii:

Yes - the form processor does work when using the default <input type=file> field, but in that instance there is no javascript involved. That's why I think the field name containing an asterisk is posing the problem.

Regarding ".dat" files - I am not trying to attach a .dat file - I am trying to attach a number of file types (.pdf, .jpg, .zip, etc...) But when the form data arrives at its destination, the attachment is gone and replaced with a blank .dat file.


glenngv:

Yes, I can apply style properties to a file input, but because the text field and button of a file input are treated as one element instead of two prevents me from getting the correct look.

I would just live with it as is, but this is just a small piece of a very large site that has already been built to a certain set of specs and I must at least try to conform to them if possible.

Thanks!

[brothercake]

I think it's because you're passing the value to a text input - a text input is not a file input, and so all it submits is the text - the filename - which is interpreted on your server as a blank file. That's my guess, anyway.

The bottom line is there are important security reasons why you can't change the appearance of a file input in more than cursory ways - font, background color, etc. I suggest you just live with it - even if you find a way of faking it, you can be damn sure the browser vendors will get to know about it and make sure it doesn't work in future releases.

[beetle]

To expand on what bcake said -- the textbox portion of a file input can only be populated by hand-typing a filename, or using the provided "browse" interface. Changing the value with scripting is not possible, as the value property for file-type inputs is read-only.