breadcrumb-the-shire/templates/partials/app-file-upload.phtml

<?php

/**
 * Shared file-upload component — card-based dropzone with drag-and-drop, current file preview, and pending preview.
 *
 * This is a deliberate exception to the "plain HTML inputs" convention: the file-upload markup is complex enough
 * (3 states, nested elements, data attributes, confirm dialog, i18n) that a partial prevents drift across call sites.
 *
 * Usage:
 *   $fileUpload = [
 *       'name'           => 'avatar',                                    // required — input name attribute
 *       'accept'         => 'image/*',                                   // required — accepted file types
 *       'hint'           => t('Allowed file types: SVG, PNG, JPG, WEBP'),// optional — hint text below dropzone label
 *       'currentSrc'     => 'admin/tenants/logo-file?uuid=…&theme=light&size=128', // optional — URL of existing server file
 *       'currentLabel'   => t('Current image'),                          // optional — label for current file preview
 *       'deleteAction'   => 'admin/tenants/logo-delete/…',               // optional — formaction for delete button (requires currentSrc)
 *       'deleteConfirm'  => t('Delete this image?'),                     // optional — confirm message on delete
 *       'required'       => false,                                       // optional — make input required
 *       'formId'         => 'tenant-logo-light-form',                    // optional — HTML5 form attribute to associate input with an external form
 *       'deleteFormId'   => 'tenant-logo-light-delete-form',             // optional — HTML5 form attribute for the delete button (bypasses formaction)
 *   ];
 *   require templatePath('partials/app-file-upload.phtml');
 *
 * @var array<string, mixed> $fileUpload
 */

$fileUpload = is_array($fileUpload ?? null) ? $fileUpload : [];
$uploadName = trim((string) ($fileUpload['name'] ?? ''));
if ($uploadName === '') {
    return;
}

$uploadAccept = trim((string) ($fileUpload['accept'] ?? ''));
$uploadHint = trim((string) ($fileUpload['hint'] ?? ''));
$uploadCurrentSrc = trim((string) ($fileUpload['currentSrc'] ?? ''));
$uploadCurrentLabel = trim((string) ($fileUpload['currentLabel'] ?? t('Current image')));
$uploadDeleteAction = trim((string) ($fileUpload['deleteAction'] ?? ''));
$uploadDeleteConfirm = trim((string) ($fileUpload['deleteConfirm'] ?? t('Delete this image?')));
$uploadRequired = (bool) ($fileUpload['required'] ?? false);
$uploadFormId = trim((string) ($fileUpload['formId'] ?? ''));
$uploadDeleteFormId = trim((string) ($fileUpload['deleteFormId'] ?? ''));
$hasCurrent = $uploadCurrentSrc !== '';
$hasDelete = $hasCurrent && ($uploadDeleteAction !== '' || $uploadDeleteFormId !== '');

?>
<div data-app-component="file-upload" class="app-file-upload"
  <?php if ($hasCurrent): ?>data-current-src="<?php e($uploadCurrentSrc); ?>" data-current-label="<?php e($uploadCurrentLabel); ?>"<?php endif; ?>>
  <?php if ($hasCurrent): ?>
    <div class="app-file-upload-current">
      <img class="app-file-upload-current-image" src="" alt="">
      <div class="app-file-upload-current-meta">
        <span class="app-file-upload-current-label"></span>
        <span class="app-file-upload-current-actions">
          <button type="button" class="app-file-upload-replace-button"><?php e(t('Replace')); ?></button>
          <?php if ($hasDelete): ?>
            <button type="submit" class="app-file-upload-delete-button"
              <?php if ($uploadDeleteFormId !== ''): ?>form="<?php e($uploadDeleteFormId); ?>"<?php else: ?>formaction="<?php e($uploadDeleteAction); ?>" formmethod="post"<?php endif; ?>
              data-confirm-message="<?php e($uploadDeleteConfirm); ?>"><?php e(t('Delete')); ?></button>
          <?php endif; ?>
        </span>
      </div>
    </div>
  <?php endif; ?>
  <label class="app-file-upload-dropzone">
    <input type="file" name="<?php e($uploadName); ?>"
      <?php if ($uploadAccept !== ''): ?>accept="<?php e($uploadAccept); ?>"<?php endif; ?>
      <?php if ($uploadFormId !== ''): ?>form="<?php e($uploadFormId); ?>"<?php endif; ?>
      <?php if ($uploadRequired): ?>required<?php endif; ?>>
    <span class="app-file-upload-dropzone-icon"><i class="bi bi-cloud-arrow-up"></i></span>
    <span class="app-file-upload-dropzone-label"><?php e(t('Drop file here or click to select')); ?></span>
    <?php if ($uploadHint !== ''): ?>
      <span class="app-file-upload-dropzone-hint"><?php e($uploadHint); ?></span>
    <?php endif; ?>
  </label>
  <div class="app-file-upload-preview">
    <img class="app-file-upload-thumbnail" alt="" hidden>
    <span class="app-file-upload-file-icon" hidden><i class="bi bi-file-earmark"></i></span>
    <span class="app-file-upload-meta">
      <span class="app-file-upload-filename"></span>
      <span class="app-file-upload-filesize"></span>
    </span>
    <button type="button" class="app-file-upload-clear" aria-label="<?php e(t('Remove selected file')); ?>"><i class="bi bi-x-lg"></i></button>
  </div>
</div>