Styling file upload form buttons in Drupal
Posted on: 07 November 2008
I've used a nice bit of CSS to style all the buttons throughout our web site, but it all falls down a bit on the file upload button. For reasons best known only to the various browser developers, this button only has limited styling capability, if indeed any at all.
There are a few solutions out there, but they are all pretty messy in terms of adding a lot of cruft to your site code. I was looking for something a bit more elegant, and which would fit neatly in with the architecture of my Drupal-based site.
Fairly unsurprisingly, the answer lay with jQuery (something I find I've been saying rather a lot lately!). Translating the solution to Drupal turns out to be as simple as downloading the jQuery File Style plugin, then implementing hook_form_alter and modifying the form:
function mymodule_form_alter($form_id, &$form) {
if($form_id == 'user_edit') {
// add support for styling the file upload button
drupal_add_js('misc/jquery.filestyle.mini.js');
$form['picture']['#suffix'] = '
<script type="text/javascript">
$("input[type=file]").filestyle({
image: "/'.path_to_theme().'/img/file_upload_button.gif",
imageheight : 22,
imagewidth : 82,
width : 250
});
</script>';
}
}
(and making your button image, of course)
Works great in IE6, IE7 and FF3