feat: add reusable app-file-upload component with drag-and-drop and preview
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:
@@ -252,20 +252,19 @@ if ($lastLoginAt !== '') {
|
||||
<hr>
|
||||
<form class="user-avatar-form" method="post" action="admin/users/avatar/<?php e($avatarUuid); ?>"
|
||||
enctype="multipart/form-data">
|
||||
<label class="user-avatar-upload">
|
||||
<input type="file" name="avatar" accept="image/*">
|
||||
</label>
|
||||
<div class="grid">
|
||||
<button type="submit" class="app-action-success">
|
||||
<?php e(t('Save')); ?>
|
||||
</button>
|
||||
<?php if ($hasAvatar): ?>
|
||||
<button data-tooltip-pos="top" data-tooltip="<?php e(t('Remove image')); ?>" type="submit" class="danger" formaction="admin/users/avatar-delete/<?php e($avatarUuid); ?>"
|
||||
formmethod="post">
|
||||
<i class="bi bi-trash3-fill"></i>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php
|
||||
$fileUpload = [
|
||||
'name' => 'avatar',
|
||||
'accept' => 'image/*',
|
||||
'hint' => t('Allowed file types: SVG, PNG, JPG, WEBP'),
|
||||
'currentSrc' => $hasAvatar ? 'admin/users/avatar-file?uuid=' . $avatarUuid . '&size=128' : '',
|
||||
'deleteAction' => $hasAvatar ? 'admin/users/avatar-delete/' . $avatarUuid : '',
|
||||
];
|
||||
require templatePath('partials/app-file-upload.phtml');
|
||||
?>
|
||||
<button type="submit" class="app-action-success">
|
||||
<?php e(t('Save')); ?>
|
||||
</button>
|
||||
<?php Session::getCsrfInput(); ?>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
Reference in New Issue
Block a user