Sign In : Sign Up : Blog : Search: Language : Help :
This website is now frozen, please migrate your content to BotLibre.com or BotLibre.biz
Web Design

How to style a file upload button

by admin posted May 28 2014, 12:31

Most well designed websites no longer use the standard browser button styles, but instead use their own styles for submit and other buttons. Either to make them bigger, colored, or use images.
This is fairly easy to do for standard submit buttons, and other input types, but file upload buttons do not let you style them, so you are left with the ugly browser default. As well it is normally desirable to submit the form when the user selects the file to upload, but with the standard file input you also need a submit input.
So here is a standard file upload.

<form action="upload-file" method="post" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <input name="upload-file" type="submit" value="Upload"/> </form>
As with many things in HTML, since styling a file input is not supported, a "standard" hack has evolved around how to do this. It is not that difficult to add the style, you just need a little JavaScript. First, to make the form submit when the user selects the file, add the following to your file input, onchange="this.form.submit()" Now to avoid having the file input display add, style="display:none;position:absolute;" And finally style your submit button however you want it to look, and make it click the file input when it is clicked, onclick="document.getElementById('file').click(); return false;"
<form action="upload-file" method="post" enctype="multipart/form-data"> <input id="file" type="file" name="file" style="display:none;position:absolute;" onchange="this.form.submit()"/> <input name="upload-file" type="submit" value="Upload" onclick="document.getElementById('file').click(); return false;"/> </form>
That is it. One thing to remember is that the submit is no longer occurring through the submit button, so it will have no value, so make sure you are not using it on your server.

Id: 29303
Tags: files, upload, javascript
Posted: May 28 2014, 12:31
Updated: Mar 27 2015, 15:40
Replies: 0
Views: 1385, today: 1, week: 3, month: 11
I'm sure
Flag graphic as offensive, or in violation of site rules