Background: I'm using the profile module to hold user data but that makes an unpleasant UX for updating user info. So I'm using a single-page webform to offer the editable user data. The user data is provided as default data before it's rendered and the webform does not store information, when submitted the data is copied back to the right profiles and the submission deleted.

Problem: The user's profile picture is displayed as the file name, and I want the picture but I can't see any setting for that under the image element. What I get is this: What I don't want What I want (with better styling, obviously): enter image description here

Is this possible with out-of-the-box webform elements?

up vote 0 down vote accepted

You are going to have to either alter the output to the file-link.html.twig template. You can do this by replacing the link variable with an image via template_preprocess_file_link.

- or -

Alter the rendered output of the managed_file element which is a little more difficult.


So I decided to investigate how one would add a preview to the managed file upload element. I realized that most of the needed functionality already existed in the Webform module. I created Issue #3018806: Allow authenticated users to preview file uploads and I should have a working patch in the next day or so.

  • Thanks for that. – Adaddinsane 2 days ago
  • The latest release of the webform module allows you to customize the image upload's preview for authenticated users. – jrockowitz 2 days ago
  • You, sir, are a hero. – Adaddinsane yesterday

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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