Styling file upload form buttons in Drupal

Submitted by mark on Fri, 07/11/2008 - 14:40
in

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