fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add reusable app-file-upload component with drag-and-drop and preview

Browse Source 
Replace bare <input type="file"> across all upload locations with a
card-based dropzone component via shared partial. Three visual states:
current server file (thumbnail + Replace/Delete), empty dropzone, and
pending file preview (local FileReader thumbnail + metadata). Delete
actions use data-confirm-message for confirmation dialog.

Centralized as templates/partials/app-file-upload.phtml to prevent
markup drift — documented as deliberate exception to plain-HTML inputs
convention in CLAUDE.md and developer checklist.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-06 11:58:14 +02:00
parent ea786f5341
commit 9a4d59eb4c
14 changed files with 695 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
templates/partials/app-file-upload.phtml Normal file
View File

@@ -0,0 +1,79 @@
<?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/avatar-file?uuid=…&size=128', // optional — URL of existing server file
* 'currentLabel' => t('Current image'), // optional — label for current file preview
* 'deleteAction' => 'admin/tenants/avatar-delete/…', // optional — formaction for delete button (requires currentSrc)
* 'deleteConfirm' => t('Delete this image?'), // optional — confirm message on delete
* 'required' => false, // optional — make input required
* ];
* 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);
$hasCurrent = $uploadCurrentSrc !== '';
$hasDelete = $hasCurrent && $uploadDeleteAction !== '';
?>
<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"
formaction="<?php e($uploadDeleteAction); ?>" formmethod="post"
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 ($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>

2
templates/partials/app-main-aside.phtml
View File

@@ -285,7 +285,7 @@ $modulePanelSlots = is_array($moduleSlots['aside.tab_panel'] ?? null) ? $moduleS
<div class="app-sidebar-tenant-logo">
<a href="<?php e(lurl('')); ?>">
<?php if ($hasTenantAvatar): ?>
<img src="auth/tenant-avatar-file?uuid=<?php e($tenantUuid); ?>&size=128" alt="<?php e($tenantName); ?>"
<img src="auth/tenant-avatar-file?uuid=<?php e($tenantUuid); ?>&size=256" alt="<?php e($tenantName); ?>"
title="<?php e($tenantName); ?>">
<?php else: ?>
<div class="app-sidebar-tenant-name">