Добавление фото пользователю с использованием MODX Login

В этой статье добавим пользователям возможность устанавливать фото профиля для CMS MODX с использованием расширения Login.

Требования

Возможность добавления фотографии пользователям осуществим в ресурсе «Редактирование данных».

Перед тем как переходить к изучению этой статьи необходимо выполнить все действия, описанные в этих статьях:

1. Регистрация пользователей
2. Авторизация пользователей
3. Личный кабинет пользователя

Все эти статьи основаны на расширении Login.

Создание папки для файлов

Процесс добавления нового функционала начнём с выполнения простых вещей:

1. Создания папки img-users в assets. В ней будем хранить фото (аватарки) пользователей.
2. Загрузки в эту папку изображения default.svg, которое будет иметь пользователь по умолчанию.

Хранить аватарки будем в разрешении 100x100.

Изменение содержимого ресурса для обновления данных пользователя

Откроем ресурс «Редактирование данных»:

Внесём в его содержимое следующие изменения:

1. Добавим в вызов сниппета UpdateProfile параметр preHooks и укажем в качестве значения сниппет hookProfileUpdatePhoto. С помощью него мы будем изменять поле photo в профиле пользователя. Выполнять действия hookProfileUpdatePhoto будет выполнять до обновления профиля пользователя, но после проверки полей формы:

[[!UpdateProfile?
  &validate=`fullname:required`
  &reloadOnSuccess=`1`
  &preHooks=`hookProfileUpdatePhoto`
]]

2. Изменим HTML форму:

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Редактирование данных</div>
    <div class="card-body">
      <!-- форма, содержащая кнопку для удаления фото -->
      [[+photo:notempty=`<form class="form" action="[[~[[*id]]]]" method="post">
        <div class="mb-3 text-end">
          <input type="hidden" name="remove-photo">
          <input type="hidden" name="fullname" value="[[+fullname]]">
          <input type="submit" class="btn btn-danger" value="Удалить фото" name="login-updprof-btn" id="login-updprof-btn">
        </div>
      </form>`]]
      <div class="mb-3">
        <img src="[[+photo:default=`/assets/img-users/default.svg`]]" class="rounded-circle mx-auto mb-2 d-block" id="photouser" alt="[[+email]]" width="100" height="100" style="object-fit: cover;">
        <div class="fw-bold text-center">[[+email]]</div>
      </div>

      [[+login.update_success:is=`1`:then=`<div class="alert alert-success" role="alert">[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]</div>`:else=`[[+error.message:notempty=`<div class="updprof-error alert alert-danger" role="alert">[[+error.message]]</div>`]]`]]
      <form class="form" action="[[~[[*id]]]]" method="post" enctype="multipart/form-data">
        <input type="hidden" name="nospam" value="">
        <div class="mb-3">
          <label for="fullname" class="form-label">[[!%login.fullname? &namespace=`login` &topic=`updateprofile`]]</label>
          <input type="text" name="fullname" class="form-control[[+error.fullname:notempty=` is-invalid`]]" id="fullname" value="[[+fullname]]">
          <div class="invalid-feedback">[[+error.fullname]]</div>
        </div>
        <!-- блок, содержащий поле photo, с помощью которого будем загружать фото -->
        <div class="mb-3">
          <label for="photo" class="form-label">Фото</label>
          <input type="file" id="photo" name="photo" class="form-control">
          <div class="invalid-feedback"></div>
        </div>
        <div class="mb-3">
          <label for="phone" class="form-label">[[!%login.phone]]</label>
          <input type="text" name="phone" class="form-control[[+error.phone:notempty=` is-invalid`]]" id="phone" value="[[+phone]]">
          <div class="invalid-feedback">[[+error.phone]]</div>
        </div>
        <div class="mb-3">
          <label for="country" class="form-label">[[!%login.country]]</label>
          <input type="text" name="country" class="form-control[[+error.country:notempty=` is-invalid`]]" id="country" value="[[+country]]">
          <div class="invalid-feedback">[[+error.country]]</div>
        </div>
        <div class="mb-3">
          <label for="website" class="form-label">[[!%login.website]]</label>
          <input type="text" name="website" class="form-control[[+error.website:notempty=` is-invalid`]]" id="website" value="[[+website]]">
          <div class="invalid-feedback">[[+error.website]]</div>
        </div>
        <input type="submit" class="btn btn-primary" value="Обновить профиль" name="login-updprof-btn" id="login-updprof-btn">
      </form>
    </div>
  </div>
</div>

В этом коде форма написана с использованием Bootstrap Forms.

Перед формой, как видно, добавлено <img> для вывода фото пользователя и его email. При отсутствия аватарки, в качестве изображения используется файл default.svg. Для его установки таким образом используется MODX фильтр default:

<img src="[[+photo:default=`/assets/img-users/default.svg`]]" class="rounded-circle mx-auto mb-2 d-block" id="photouser" alt="[[+email]]" width="100" height="100" style="object-fit: cover;">

Удаление фото осуществляется с использованием отдельной формы:

[[+photo:notempty=`<form class="form" action="[[~[[*id]]]]" method="post">
  <div class="mb-3 text-end">
    <input type="hidden" name="remove-photo">
    <input type="hidden" name="fullname" value="[[+fullname]]">
    <input type="submit" class="btn btn-danger" value="Удалить фото" name="login-updprof-btn" id="login-updprof-btn">
  </div>
</form>`]]

Добавление возможности прикрепления к основной форме файла осуществляется посредством:

• добавления к тегу <form> атрибута enctype со значением "multipart/form-data";
• добавления тега <input type="file" id="photo" name="photo">.

Для предварительного отображения аватарки напишем JavaScript. Чтение содержимого файла выполним с помощью FileReader:

// при изменении значения элемента #photo
document.querySelector('#photo').onchange = (e) => {
  // удалим у элемента класс is-invalid
  e.target.classList.remove('is-invalid');
  // если браузер не поддерживает FileReader, то прекращаем дальнейшие действия
  if (!window.FileReader) {
    console.log('Браузер не поддерживает File API');
    return;
  }
  // получаем выбранный файл
  const file = e.target.files[0];
  // выводим сообщение, если файл не является png или jpeg
  if (!((file.type == 'image/png') || (file.type == 'image/jpeg'))) {
    e.target.classList.add('is-invalid');
    e.target.nextSibling.textContent = 'Загруженный файл не является png или jpeg.';
    return;
  }
  // создаём экземпляр объекта FileReader, посредством которого будем читать файл
  const reader = new FileReader();
  // после успешного завершения чтения файла
  reader.onload = (e) => {
    // указываем в качестве значения атрибута src прочитанный файл
    document.querySelector('#photouser').src = e.target.result;
  }
  // запускаем процесс чтения файла
  reader.readAsDataURL(file);
}

В этом коде для получения различных элементов используется JavaScript метод querySelector, а для назначения событий свойство DOM-элемента on{событие}.

Итоговое содержимое ресурса «Редактирование данных» расположено на Github.

Сообщение, которое выводится, когда мы хотим задать пользователю не png или jpeg:

Страница профиля, к которой добавлено изображения пользователя:

Хук для обновления фото пользователя

Создадим сниппет hookProfileUpdatePhoto, который будем использовать в качестве хука в сниппете UpdateProfile.

Изучить, что такое сниппеты и как их создавать можно в этой статье.

Этот хук будет выполнять следующие действия:

• загружать фото в директорию assets/img-users/;
• устанавливать значения полю photo с помощью вызова метода $hook->setValue();
• удалять файл при нажатии в форме на кнопку «Удалить фото».

Содержимое hookProfileUpdatePhoto:

<?php
// разрешённые MIME типы
$allowedMimeTypes = ['jpg' => 'image/jpeg', 'png' => 'image/png'];
// директория для файлов
$path = $modx->config['base_path'] . 'assets/img-users/';
// параметры для создания уменьшенной копии изображения
$params = ['w' => 100, 'h' => 100, 'zc' => 1, 'q' => 80];

// получим профиль пользователя
$profile = $modx->user->getOne('Profile');

// если глобальный массив POST содержит ключ remove-photo
if (isset($_POST['remove-photo'])) {
  // если поле photo не пустое, то..
  if ($profile->get('photo')) {
    // полный имя файла
    $fileFullName = $modx->config['base_path'] . $profile->get('photo');
    // удалим файл
    if (file_exists($fileFullName)) {
      unlink($fileFullName);
    }
    // установим полю photo пустую строку
    $hook->setValue('photo', '');
  }
  return true;
}

// если upload не является файлом
if ($_FILES['photo']['error'] === UPLOAD_ERR_NO_FILE) {
  // установим полю photo текущее значение
  $hook->setValue('photo', $profile->get('photo'));
  return true;
}

// файл, принятый сервером
$fileTmp = $_FILES['photo']['tmp_name'];

// если файл загружен успешно, то
if (!is_uploaded_file($fileTmp) || $_FILES['photo']['error'] !== UPLOAD_ERR_OK) {
  $hook->addError('photo', 'Ошибка при загрузке изображения.');
  return false;
}

// расширение файла
$finfo = new finfo(FILEINFO_MIME_TYPE);
$fileMimeType = $finfo->file($fileTmp);
$fileExt = array_search($fileMimeType, $allowedMimeTypes, true);
if ($fileExt === false) {
  $hook->addError('photo', 'Файл имеет не допустимый формат.');
  return false;
}
// добавим хеш и расширение
$fileName = uniqid() . '.' . $fileExt;
// полное имя файла
$fileFullName = $path . $fileName;
// копируем файл
copy($fileTmp, $fileFullName);
// имя и путь для профиля, поскольку они отличаются из-за медиа-ресурса
$hook->setValue('photo', $modx->getOption('assets_url') . 'img-users/' . $fileName);

// подключим phpthumb.class.php
require_once MODX_CORE_PATH . 'vendor/james-heinrich/phpthumb/phpthumb.class.php';
// в MODX 2.8.x нужно раскомментировать нижнюю строчку и закомментировать верхнюю
// require_once MODX_CORE_PATH.'model/phpthumb/phpthumb.class.php';
// создадим новый экземпляр класса phpThumb
$phpThumb = new phpThumb();
// указываем исходное изображение
$phpThumb->setSourceFilename($fileFullName);
// устанавливаем параметры
foreach($params as $key => $value) {
  $phpThumb->setParameter($key, $value);
}
// генерируем уменьшенное изображение
if ($phpThumb->GenerateThumbnail()) {
  // сохраняем изображение в файл $fullNameFile
  if (!$phpThumb->RenderToFile($fileFullName)) {
    $modx->log(modX::LOG_LEVEL_ERROR, 'Ошибка при сохранении уменьшенного изображения в файл ' . $fileFullName);
  }
} else {
  $modx->log(modX::LOG_LEVEL_ERROR, print_r($phpThumb->debugmessages, 1));
}

return true;

В этом коде используются различные методы MODX для работы с объектами. PHP библиотека, которая предоставляет их называется xPDO. Начать изучение этой библиотеки можно с этой статьи.

Все необходимые файлы и код доступен также на Github.