Redesign an input type="file"

[OmniX]

When using this HTML code:

You get a rectangle where the location is stored, and a button labelled "Browse..".

I would like to redesign the "Browse.." button and I was told this would have to be done using mainly javascript and abit of css (I thought it would be the other way around only abit of javascript and alot of css - which im prefering).

So any ideas how to redesign the "Browse.." button?

Note: The file is a php file which contains various input type="submit", etc.

Thanks, Regards X

[Fungus1487]

in short
you cannot.
not to the extent some people like to change their form buttons.

best bet is to create another button with an onclick event to press the input type="file" which should be hidden.

[OmniX]

So your saying:

1. Create a type="file" attribute hidden
2. Create a type="submit"
3. Place the submit over the file or something like that?

If thats your idea I might give it a try when I have some freetime. The logic sounds realistic so well see how it goes.

Thanks. Regards, X

[Fungus1487]

yep.
that is the easiest way ive found to style in these situatuions

[mowen85]

This solution (only tested in IE) allows you to replicate type="input" components and apply separate styles to the text box and "Browse..." button.

<form action="#" onsubmit="hiddenFileUpload.disabled = true">
   <input type="file" id="hiddenFileUpload" style="display: none;" size="50" accept="*.*" />
   <input type="text" id="visibleTextArea" size="50" />
   <input type="button" id="visibleBrowseButton" value="Browse..." onclick="hiddenFileUpload.click(); visibleTextArea.value = hiddenFileUpload.value;" />
   <br>&nbsp;<br>
   <input type="submit" value="Submit" />
</form>

After submission, you should probably use the path specified in the visibleTextArea as the path to the file to upload because the user will have been able to manually edit this path, so it could be different from the contents of the hiddenFileUpload.

In some implementations of this, you are required to click the submit button twice before the form submits. The onsubmit action included in the code above resolves this problem. I'd be interested to find out why this happens if anyone has an answer.

With a normal type="file" input component, if you type a path into the text area before clicking the browse button, the file chooser that appears will display the directory you specified. The solution above does not replicate this bit of functionality because the value of a type="file" input component can only be set by the user. I assume this is a security measure to stop files being specified programmatically, which would allow a file to be uploaded that was different from the file the user specified.

[OmniX]

Intresting, I havent tested this but if it works sounds nice.

Not something I really would want to do but If I need to change the style of my browser I prolly would do that.

I was looking for a cheap fix something very smilar to CSS to change appearance, etc.

Thanks for the input, Regards X

[mowen85]

I assume you mean browse button instead of "browser".

This does enable you to change the appearance of the "Browse..." button using CSS.

The code was just an implementation of what I think had already been suggested by Fungus1487:
1) add an input of type="file" and make it hidden.
2) add a visible input of type="text".
3) add a visible input of type="button".
4) set it so that when the visible button is clicked, the hidden browse button is clicked. When a file is selected by the user, copy the value from the hidden text area to the visible one.

Now that you've got two separate components, a text box and a button, that have been arranged to look like the type="file" component, you can apply CSS styling to each of them.

Just add a style="" or class="" attribute to the <input type="button" ... /> in the code I posted before. You'll be able to do things to the button (such as set the background colour) that you previously couldn't do.

I hope that makes sense.

[ulrik04]

IE8 is going to support input type="file" styling (it does in the beta). Maybe the others browers will do so too soon.

[OmniX]

Nice mowen85 I sorta get what you meant now and I will try get around to it when I have freetime.

Thanks, Regards X