Theming a webform file upload widget

Question

I'm trying to replace the upload and remove buttons in a webform file upload widget with visual icons.

I'm having trouble for a number of reasons but the most confusing is this:

I don't see where in the markup the "Browse..." and "no file selected" text is coming from? I've tried altering the $variables['element']['upload_button']['value'] in hook_preprocess_webform_element and I didn't see any change in the value of the button or description.

If I remove type="file" and change the type to text, the "no file selected" note disappears too.

I have no idea what's going on.

For reference here's what I'm going for (left is after file upload, right is before file upload):

I'm using Drupal 7, Webform with Civicrm, and AutoUpload.

Answer 1

It is more likely a Javascript / jQuery related questions rather then Drupal.

The button label and text is defined by the browser which you cannot tweak in Drupal. But with Javascript / jQuery, you can override and take over event for creating your own file upload button.

Since jQuery is included in Drupal, a jQuery library should be suitable for you. jQuery File Upload is one of the best library for this purpose.

I found there are 2 contrib modules. They are jQuery File Upload and jQuery Upload FAPI.