How to change or style a file upload submit form buttons in Drupal

| | 1 min read

There are certain occasion where we need to customize the submit button as per the requirement, maybe for the visual impact of the site or as per the requirements from the client if you are developer. How to handle this situation ?. This is actually a simple task. Only thing we need to do get the new image for the submit button as suitable and matches for the page inside the Drupal website.

By calling a hook_form_alter() we can handle this submit button style for the file upload button.

Add the code shown below inside the custom module created.

  function hook_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');// it handles the addition of JavaScript to the page, either as reference to an existing file or as inline code. 
       $form['picture']['#suffix'] = '
       ;   
     }
  }

There is an option to add image height width etc for the button we added.

By adding the above code inside the custom module we created we can style the file upload button.