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:

file upload field widget screenshot screenshot of the markup of the filefield widget

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):

screenshot of desired button appearance

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


1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.