Drupal 8 User Photo Update Form

Recently I had to come up with a simple way for users to change their member profile photo without requiring them to visit the user edit screen. Here’s the result:

Member Photo Output

First, I added a new Image field called “Member Photo” to the user account fields (machine name field_user_picture). Here are the settings I used:

  • Allowed extensions: png, gif, jpg, jpeg
  • File directory: users/[date:custom:Y]-[date:custom:m]
  • Max size: 10 MB
  • Checked: Enable alt field
  • Checked: Alt field required

Next, I configured the default view mode to show the image at a specific size and I set the label to “visually hidden”.

Next, in a new module I created the following structure:

  • mymodule
    • src
      • Form
        • MemberPhoto.php
    • mymodule.routing.yml

Lastly, you must clear the caches for the new route to work.

DISCLAIMER: this will not automatically delete the old photo if a user uploads a new one. Also, you might consider adding a checkbox or button to delete the current photo.


mymodule.routing.yml

MemberPhoto.php

 

Tagged with: ,
Posted in Development

Leave a Reply

Your email address will not be published. Required fields are marked *

*