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:

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

mymodule.member_photo:
  path: '/user/{user}/photo'
  defaults:
    _form: '\Drupal\mymodule\Form\MemberPhoto'
    _title_callback: '\Drupal\mymodule\Form\MemberPhoto::getTitle'
  options:
    parameters:
      user:
        type: entity:user
  requirements:
    user: \d+
    _entity_access: 'user.update'

mymodule.member_photo:

path: '/user/{user}/photo'

defaults:

_form: '\Drupal\mymodule\Form\MemberPhoto'

_title_callback: '\Drupal\mymodule\Form\MemberPhoto::getTitle'

options:

parameters:

user:

type: entity:user

requirements:

user: \d+

_entity_access: 'user.update'

MemberPhoto.php

<?php

namespace Drupal\mymodule\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\file\Entity\File;
use Drupal\user\Entity\User;

/**
 * Class MemberPhoto.
 *
 * @package Drupal\mymodule\Form
 */
class MemberPhoto extends FormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'member_photo';
  }

  /**
   * Returns the title for the form's page.
   *
   * @param User|null $user
   *   User object.
   *
   * @return \Drupal\Core\StringTranslation\TranslatableMarkup
   *   Page title.
   */
  public function getTitle(User $user = NULL) {
    return $this->t('Member Photo for @name', ['@name' => $user->getUsername()]);
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state, User $user = NULL) {
    if (empty($user)) {
      $form['message'] = [
        '#markup' => $this->t('Could not load user.'),
      ];

      return $form;
    }

    $form_state->set('user', $user);

    $current_photo = $user->get('field_user_picture');
    if (!empty($current_photo)) {
      $current_photo_arr = $current_photo->view('default');
      $current_photo_arr['#weight'] = -10;
      $form['current_image'] = $current_photo_arr;
    }
    else {
      $form['message'] = [
        '#markup' => $this->t('You do not currently have a member photo.'),
      ];
    }

    $form['new_photo'] = [
      '#type' => 'fieldset',
      '#title' => $this->t('Upload a new photo'),
    ];

    $form['new_photo']['image_file'] = [
      '#title' => t('Upload a new member photo'),
      '#title_display' => 'invisible',
      '#type' => 'managed_file',
      '#upload_location' => 'public://users/' . date('Y-m'),
      '#multiple' => FALSE,
      '#description' => t('Allowed extensions: <em>gif, png, jpg, jpeg</em>'),
      '#upload_validators' => [
        'file_validate_is_image' => [],
        'file_validate_extensions' => ['gif png jpg jpeg'],
        'file_validate_size' => [10485760],
      ],
    ];

    $form['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    $image = $form_state->getValue('image_file');

    if (!empty($image)) {
      $file = File::load($image[0]);
      /** @var \Drupal\user\Entity\User $user */
      $user = $form_state->get('user');
      $user->set('field_user_picture', [
        'target_id' => $file->id(),
        'alt' => $this->t('Member photo'),
      ]);
      $user->save();
    }
  }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<?php

namespace Drupal\mymodule\Form;

use Drupal\Core\Form\FormBase;

use Drupal\Core\Form\FormStateInterface;

use Drupal\file\Entity\File;

use Drupal\user\Entity\User;

/**

* Class MemberPhoto.

* @package Drupal\mymodule\Form

class MemberPhoto extends FormBase {

/**

* {@inheritdoc}

public function getFormId() {

return 'member_photo';

}

/**

* Returns the title for the form's page.

* @param User|null $user

* User object.

* @return \Drupal\Core\StringTranslation\TranslatableMarkup

* Page title.

public function getTitle(User $user = NULL) {

return $this->t('Member Photo for @name', ['@name' => $user->getUsername()]);

}

/**

* {@inheritdoc}

public function buildForm(array $form, FormStateInterface $form_state, User $user = NULL) {

if (empty($user)) {

$form['message'] = [

'#markup' => $this->t('Could not load user.'),

];

return $form;

}

$form_state->set('user', $user);

$current_photo = $user->get('field_user_picture');

if (!empty($current_photo)) {

$current_photo_arr = $current_photo->view('default');

$current_photo_arr['#weight'] = -10;

$form['current_image'] = $current_photo_arr;

}

else {

$form['message'] = [

'#markup' => $this->t('You do not currently have a member photo.'),

];

}

$form['new_photo'] = [

'#type' => 'fieldset',

'#title' => $this->t('Upload a new photo'),

];

$form['new_photo']['image_file'] = [

'#title' => t('Upload a new member photo'),

'#title_display' => 'invisible',

'#type' => 'managed_file',

'#upload_location' => 'public://users/' . date('Y-m'),

'#multiple' => FALSE,

'#description' => t('Allowed extensions: <em>gif, png, jpg, jpeg</em>'),

'#upload_validators' => [

'file_validate_is_image' => [],

'file_validate_extensions' => ['gif png jpg jpeg'],

'file_validate_size' => [10485760],

];

$form['submit'] = [

'#type' => 'submit',

'#value' => $this->t('Submit'),

];

return $form;

}

/**

* {@inheritdoc}

public function validateForm(array &$form, FormStateInterface $form_state) {

parent::validateForm($form, $form_state);

}

/**

* {@inheritdoc}

public function submitForm(array &$form, FormStateInterface $form_state) {

$image = $form_state->getValue('image_file');

if (!empty($image)) {

$file = File::load($image[0]);

/** @var \Drupal\user\Entity\User $user */

$user = $form_state->get('user');

$user->set('field_user_picture', [

'target_id' => $file->id(),

'alt' => $this->t('Member photo'),

]);

$user->save();

}

Leave a Reply Cancel reply