feat: add file display to forms and recap pages

- Live file preview on all file inputs (file-field partial, edit template): thumbnails for images, emoji icons for PDF/video/zip/vtt, filename + size - New file-preview.js wired via $extraJs in add.php / edit.php and direct <script> in partage/index.php; $extraJs support added to head.php - admin/recapitulatif.php: replace plain table with rich file list — image thumbnails linked to media.php, type badges, human-readable size, date - partage/recapitulatif.php: full rewrite — shows thesis metadata + files list with same rich display (no media links for student privacy) - form.css: new sections for .file-preview-list (live preview) and .recap-file-list / .recap-dl / .partage-recap (recap pages)
2026-05-06 11:09:18 +02:00 · 2026-04-27 20:41:43 +02:00
parent aca7e7eef8
commit 32a7509598
11 changed files with 450 additions and 107 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -1,77 +1,16 @@
-# TFE Access Restriction Feature
+# TODO

-## Renaming
- [x] Rename `thanks.php` → `recapitulatif.php` in admin and partage (public + templates)
- [x] Update all internal references (routes, includes, header.php, README, controller comment)
+## File Display in Forms & Recaps

-
-## Admin Edit Form — File Management
- [x] Add cover image upload/preview/remove to edit.php
- [x] Add existing thesis files listing with per-file delete checkboxes
- [x] Add new thesis files upload field (PDF, JPG, PNG, MP4, ZIP, VTT)
- [x] Add `deleteThesisFile()` and `handleCoverUpload()` to Database.php
- [x] Update `ThesisEditController::save()` to handle cover, file deletion, new uploads
- [x] Update `ThesisEditController::load()` to expose `currentFiles` + `currentCover`
- [x] Rework Fichiers fieldset layout: inline file inputs (no partial double-label), banner moved inside fieldset, one label per field
-
-
-## Overview
-Add access restriction for TFE attached files based on user email domain, with admin validation workflow.
-
-## Implementation Plan
-
-### 1. Database Changes
- [x] Add `restricted_files_enabled` setting to site_settings table
- [x] Create `file_access_requests` table
-  - id, thesis_id, email, justification, status (pending/approved/rejected), admin_notes, created_at, approved_at, approved_by_admin_id
- [x] Create `file_access_tokens` table (short-lived, one-time email links, 24h)
-  - id, request_id, token (unique), expires_at, used_at (one-time mark)
- [x] Create `file_access_sessions` table (long-lived browser sessions, 30 days)
-  - id, request_id, session_token, expires_at, is_valid
- [x] Create `file_access_audit` table (IP, UA, timestamp on redemption)
-
-### 2. Configuration
- [x] Add `restricted_files_enabled` checkbox in parametres.php (Formulaire section)
- [x] Update settings.php action handler to persist the setting
-
-### 3. Public TFE View (tfe.php) - Restricted Access UI
- [x] TfeController checks restricted flag + access_type_id=2 + cookie session
- [x] French text: "Accès restreint — Les fichiers attachés à ce TFE sont réservés aux utilisateurs autorisés."
- [x] Request form: email input + conditional justification textarea (non-ERG only)
- [x] JS: shows/hides justification textarea based on email domain (@erg.school / @erg.be)
- [x] Form submits via fetch POST to /request-access.php with CSRF token
- [x] Metadata, title, authors, synopsis all remain visible regardless of restriction
-
-### 4. Email Flow
- [x] @erg.school / @erg.be → auto-approve, generate 24h one-time token, send email immediately
- [x] External email → create pending request, notify admin by email
- [x] Admin approves → generate 24h token, send email to requester
- [x] Email contains link to GET /validate-access (confirmation page) → POST to redeem
-
-### 5. Secure Token Redemption
- [x] One-time email token (24h, marked used_at on first click, is_valid=0)
- [x] GET /validate-access → shows confirmation page (no side effects)
- [x] POST /validate-access → redeems token (CSRF required), creates browser session cookie
- [x] Cookie: HttpOnly; Secure; SameSite=Strict; 30 days
- [x] Session stored in file_access_sessions (separate from one-time email token)
- [x] TfeController checks file_access_sessions via hasValidCookieAccess()
- [x] Audit trail: IP, User-Agent, timestamp in file_access_audit on every redemption attempt
-
-### 6. Admin Panel - Access Requests Management
- [x] Admin page: /admin/file-access.php (linked from admin nav with pending badge)
- [x] List pending/approved/rejected requests with tab filters and pagination
- [x] Approve dialog (with optional note) → sends 24h access email
- [x] Reject dialog (with optional note)
- [x] Bug fix: $vars was never extract()ed — page was blank
- [x] Bug fix: template included head.php/header.php/footer.php itself (double-include)
- [x] Bug fix: admin approval URL used $requestId instead of $request['thesis_id']
-
-### 7. Security
- [x] One-time use tokens (used_at + is_valid=0)
- [x] POST-based redemption (token in hidden form field, not URL action)
- [x] 256-bit random tokens, rate limiting on request submission (3/10min per IP)
- [x] HttpOnly cookie + SameSite=Strict
- [x] CSRF on all mutations
- [x] Audit trail (IP, UA, event, timestamp)
- [x] Short-lived email links (24h), long-lived browser sessions (30 days)
- [x] App::boot() starts session for all public requests (CSRF token available everywhere)
+- [x] Add live file preview to `file-field.php` partial (`data-preview` attribute + `.file-preview-list` container)
+- [x] Write `file-preview.js` — renders thumbnails for images, emoji icons for PDFs/videos/zips, filename + size
+- [x] Load `file-preview.js` in `admin/add.php` via `$extraJs`
+- [x] Load `file-preview.js` in `admin/edit.php` via `$extraJs`
+- [x] Load `file-preview.js` in `partage/index.php` (self-contained HTML, direct `<script>` tag)
+- [x] Support `$extraJs` in `head.php`
+- [x] Add `data-preview` + preview container to edit template's cover/banner/files inputs (not using partial)
+- [x] Enhance `admin/recapitulatif.php` template — image thumbnails, clickable filenames, type badges, file size, date
+- [x] Rewrite `partage/recapitulatif.php` — full recap with thesis metadata + uploaded files list (thumbnails for images, icons for others)
+- [x] Add CSS: `.file-preview-list`, `.fp-item`, `.fp-thumb`, `.fp-icon`, `.fp-meta`, `.fp-name`, `.fp-size`
+- [x] Add CSS: `.recap-file-list`, `.recap-file-item`, `.recap-file-thumb`, `.recap-file-icon`, `.recap-file-meta`, `.recap-file-type-badge`, `.recap-file-date`
+- [x] Add CSS: `.partage-recap`, `.recap-section`, `.recap-dl` for partage recap layout
--- a/app/public/admin/add.php
+++ b/app/public/admin/add.php
@@ -46,6 +46,7 @@ function wasSelected($key, $value) {
 $isAdmin = true;
 $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
+$extraJs   = ['/assets/js/file-preview.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/add.php';
--- a/app/public/admin/edit.php
+++ b/app/public/admin/edit.php
@@ -28,6 +28,7 @@ try {

 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
+$extraJs   = ['/assets/js/file-preview.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/edit.php';
--- a/app/public/assets/css/form.css
+++ b/app/public/assets/css/form.css
@@ -540,6 +540,190 @@ label:has(+ div > input:required)::after {
    font-size: var(--step--1);
 }

+/* ── Live file-input preview (.file-preview-list) ──────────────────────── */
+.file-preview-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    margin-top: var(--space-2xs);
+}
+
+.file-preview-list:empty {
+    display: none;
+}
+
+.fp-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    padding: var(--space-3xs) var(--space-xs);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+    min-width: 0;
+    max-width: 260px;
+}
+
+.fp-thumb {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 3px;
+    flex-shrink: 0;
+}
+
+.fp-icon {
+    font-size: 1.6rem;
+    line-height: 1;
+    flex-shrink: 0;
+    width: 48px;
+    text-align: center;
+}
+
+.fp-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.fp-name {
+    font-size: var(--step--2);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 180px;
+    display: block;
+}
+
+.fp-size {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+}
+
+/* ── Recap file list (admin & partage recapitulatif) ────────────────────── */
+.recap-file-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.recap-file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-s);
+    padding: var(--space-xs) var(--space-s);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+}
+
+.recap-file-thumb-link {
+    flex-shrink: 0;
+}
+
+.recap-file-thumb {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border-radius: 3px;
+    display: block;
+}
+
+.recap-file-icon {
+    font-size: 2rem;
+    line-height: 1;
+    width: 64px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.recap-file-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--space-2xs) var(--space-s);
+    min-width: 0;
+}
+
+.recap-file-name {
+    font-size: var(--step--1);
+    font-weight: 500;
+    color: var(--text-primary);
+    word-break: break-all;
+}
+
+a.recap-file-name {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+a.recap-file-name:hover {
+    color: var(--accent-primary);
+}
+
+.recap-file-type-badge {
+    font-size: var(--step--2);
+    padding: 1px 6px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-primary);
+    border-radius: 3px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.recap-file-size,
+.recap-file-date {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+    white-space: nowrap;
+}
+
+/* ── Partage recap page ─────────────────────────────────────────────────── */
+.partage-recap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-l);
+}
+
+.recap-section {
+    border-top: 1px solid var(--border-primary);
+    padding-top: var(--space-m);
+}
+
+.recap-section h2 {
+    font-size: var(--step-0);
+    font-weight: 600;
+    margin: 0 0 var(--space-s);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+}
+
+.recap-dl {
+    display: grid;
+    grid-template-columns: 180px 1fr;
+    gap: var(--space-2xs) var(--space-s);
+    margin: 0;
+}
+
+.recap-dl dt {
+    font-size: var(--step--1);
+    font-weight: 600;
+    color: var(--text-secondary);
+    padding-top: 2px;
+}
+
+.recap-dl dd {
+    font-size: var(--step--1);
+    margin: 0;
+    color: var(--text-primary);
+}
+
 /* ── Thanks page ────────────────────────────────────────────────────────── */
 .thanks-student-page {
    display: flex;
--- a/app/public/assets/js/file-preview.js
+++ b/app/public/assets/js/file-preview.js
@@ -0,0 +1,96 @@
+/**
+ * Live file-input preview.
+ * For every <input type="file" data-preview="CONTAINER_ID"> found on the page,
+ * renders a list of selected files with thumbnails (images) or file-type icons
+ * (PDFs, videos, archives…) and the filename + size.
+ */
+(function () {
+  'use strict';
+
+  const ICON = {
+    pdf:   '📄',
+    video: '🎬',
+    zip:   '🗜️',
+    vtt:   '💬',
+    image: '🖼️',
+    other: '📎',
+  };
+
+  function iconFor(file) {
+    const t = file.type;
+    if (t.startsWith('image/'))      return ICON.image;
+    if (t === 'application/pdf')     return ICON.pdf;
+    if (t.startsWith('video/'))      return ICON.video;
+    if (t === 'application/zip' || t === 'application/x-zip-compressed') return ICON.zip;
+    if (file.name.endsWith('.vtt'))  return ICON.vtt;
+    return ICON.other;
+  }
+
+  function humanSize(bytes) {
+    if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
+    if (bytes >= 1048576)   return (bytes / 1048576).toFixed(2) + ' MB';
+    if (bytes >= 1024)      return (bytes / 1024).toFixed(1) + ' KB';
+    return bytes + ' B';
+  }
+
+  function renderPreview(input, container) {
+    container.innerHTML = '';
+    const files = Array.from(input.files);
+    if (!files.length) return;
+
+    files.forEach(function (file) {
+      const item = document.createElement('div');
+      item.className = 'fp-item';
+
+      if (file.type.startsWith('image/')) {
+        const img = document.createElement('img');
+        img.className = 'fp-thumb';
+        img.alt = file.name;
+        const reader = new FileReader();
+        reader.onload = function (e) { img.src = e.target.result; };
+        reader.readAsDataURL(file);
+        item.appendChild(img);
+      } else {
+        const icon = document.createElement('span');
+        icon.className = 'fp-icon';
+        icon.textContent = iconFor(file);
+        item.appendChild(icon);
+      }
+
+      const meta = document.createElement('span');
+      meta.className = 'fp-meta';
+      meta.innerHTML =
+        '<span class="fp-name">' + escHtml(file.name) + '</span>' +
+        '<span class="fp-size">' + humanSize(file.size) + '</span>';
+      item.appendChild(meta);
+
+      container.appendChild(item);
+    });
+  }
+
+  function escHtml(str) {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function init() {
+    document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
+      var containerId = input.getAttribute('data-preview');
+      var container   = document.getElementById(containerId);
+      if (!container) return;
+
+      input.addEventListener('change', function () {
+        renderPreview(input, container);
+      });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
--- a/app/public/partage/index.php
+++ b/app/public/partage/index.php
@@ -218,6 +218,7 @@ function renderShareLinkForm(string $slug, array $link): void
        <title><?= htmlspecialchars($pageTitle) ?></title>
        <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
        <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
+        <script src="<?= App::assetV('/assets/js/file-preview.js') ?>" defer></script>
    </head>
    <body class="student-body">
        <main id="main-content">
--- a/app/public/partage/recapitulatif.php
+++ b/app/public/partage/recapitulatif.php
@@ -1,7 +1,7 @@
 <?php
 /**
- * Thanks page for share-link submissions.
- * Displays a centered confirmation with a link to create another thesis via the same link.
+ * Confirmation / recap page for share-link submissions.
+ * Displays the submitted thesis details and uploaded files.
 */
 if (!defined('APP_ROOT')) {
    require_once __DIR__ . '/../../bootstrap.php';
@@ -15,21 +15,31 @@ if ($thesisId <= 0) {
    die('ID de TFE invalide.');
 }

-// Verify the thesis exists
-$db = Database::getInstance();
+$db     = Database::getInstance();
 $thesis = $db->getThesis($thesisId);
 if (!$thesis) {
    http_response_code(404);
    die('TFE introuvable.');
 }

+$files = $db->getThesisFiles($thesisId);
+
 // Was the confirmation e-mail sent?
 $emailSent = !empty($_SESSION['share_email_sent']);
 unset($_SESSION['share_email_sent']);

-// Get the share link slug from the referer path
-$pathParts = explode('/', trim($_SERVER['REQUEST_URI'] ?? '', '/'));
-$slug = count($pathParts) >= 2 ? $pathParts[0] : null;
+// Derive share-link slug from the URI so we can build the "submit another" link.
+$pathParts = explode('/', trim(parse_url($_SERVER['REQUEST_URI'] ?? '', PHP_URL_PATH), '/'));
+// URI is /partage/recapitulatif?id=N  → parts[0]=partage, parts[1]=recapitulatif
+// We have no slug here, so just link back to /partage/ root.
+$slug = null;
+
+function partageFormatFileSize(int $bytes): string {
+    if ($bytes >= 1073741824) return number_format($bytes / 1073741824, 2) . ' GB';
+    if ($bytes >= 1048576)   return number_format($bytes / 1048576, 2) . ' MB';
+    if ($bytes >= 1024)      return number_format($bytes / 1024, 2) . ' KB';
+    return $bytes . ' B';
+}

 $pageTitle = 'Merci — TFE enregistré';
 ?>
@@ -43,20 +53,99 @@ $pageTitle = 'Merci — TFE enregistré';
    <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
 </head>
 <body class="student-body">
-    <main id="main-content" class="thanks-student-page">
+    <main id="main-content" class="partage-recap">
+
        <div class="thanks-success">
            <h1>✅ Merci !</h1>
            <p class="thanks-message">Votre TFE a bien été enregistré sur la plateforme.</p>
            <?php if ($emailSent): ?>
            <p class="flash-success">📧 Un e-mail de confirmation a été envoyé avec un récapitulatif de votre soumission.</p>
            <?php endif; ?>
-            <?php if ($thesis): ?>
-            <p><strong><?= htmlspecialchars($thesis['title']) ?></strong><?php if (!empty($thesis['authors'])): ?> — <?= htmlspecialchars($thesis['authors']) ?><?php endif; ?></p>
-            <?php endif; ?>
-            <?php if ($slug): ?>
-            <a href="/partage/<?= urlencode($slug) ?>" class="btn-new-form">+ Soumettre un autre TFE</a>
-            <?php endif; ?>
        </div>
+
+        <section class="recap-section">
+            <h2>Récapitulatif de votre soumission</h2>
+            <dl class="recap-dl">
+                <dt>Titre</dt>
+                <dd><?= htmlspecialchars($thesis['title']) ?></dd>
+
+                <?php if (!empty($thesis['subtitle'])): ?>
+                <dt>Sous-titre</dt>
+                <dd><?= htmlspecialchars($thesis['subtitle']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['authors'])): ?>
+                <dt>Auteur·ice(s)</dt>
+                <dd><?= htmlspecialchars($thesis['authors']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['year'])): ?>
+                <dt>Année</dt>
+                <dd><?= htmlspecialchars((string)$thesis['year']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['orientation'])): ?>
+                <dt>Orientation</dt>
+                <dd><?= htmlspecialchars($thesis['orientation']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['ap_program'])): ?>
+                <dt>Atelier pluridisciplinaire</dt>
+                <dd><?= htmlspecialchars($thesis['ap_program']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['finality_type'])): ?>
+                <dt>Finalité</dt>
+                <dd><?= htmlspecialchars($thesis['finality_type']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['keywords'])): ?>
+                <dt>Mots-clés</dt>
+                <dd><?= htmlspecialchars($thesis['keywords']) ?></dd>
+                <?php endif; ?>
+            </dl>
+        </section>
+
+        <?php if (!empty($files)): ?>
+        <section class="recap-section">
+            <h2>Fichiers soumis</h2>
+            <ul class="recap-file-list">
+                <?php foreach ($files as $f): ?>
+                <?php
+                    $mime     = $f['mime_type'] ?? '';
+                    $isImage  = str_starts_with($mime, 'image/');
+                    $mediaUrl = '/media.php?path=' . urlencode($f['file_path']);
+                    $fileName = htmlspecialchars($f['file_name'] ?? basename($f['file_path']));
+                    $fileType = htmlspecialchars($f['file_type']);
+                ?>
+                <li class="recap-file-item">
+                    <?php if ($isImage): ?>
+                    <a href="<?= $mediaUrl ?>" target="_blank" rel="noopener" class="recap-file-thumb-link">
+                        <img src="<?= $mediaUrl ?>" alt="<?= $fileName ?>" class="recap-file-thumb" loading="lazy">
+                    </a>
+                    <?php else: ?>
+                    <span class="recap-file-icon">
+                        <?php
+                        if ($mime === 'application/pdf')   echo '📄';
+                        elseif (str_starts_with($mime, 'video/')) echo '🎬';
+                        elseif (str_starts_with($mime, 'audio/')) echo '🎵';
+                        elseif (in_array($mime, ['application/zip','application/x-zip-compressed'])) echo '🗜️';
+                        elseif (str_ends_with($f['file_name'] ?? '', '.vtt')) echo '💬';
+                        else echo '📎';
+                        ?>
+                    </span>
+                    <?php endif; ?>
+                    <div class="recap-file-meta">
+                        <span class="recap-file-name"><?= $fileName ?></span>
+                        <span class="recap-file-type-badge"><?= $fileType ?></span>
+                        <span class="recap-file-size"><?= partageFormatFileSize((int)$f['file_size']) ?></span>
+                    </div>
+                </li>
+                <?php endforeach; ?>
+            </ul>
+        </section>
+        <?php endif; ?>
+
    </main>
 </body>
 </html>
--- a/app/templates/admin/edit.php
+++ b/app/templates/admin/edit.php
@@ -112,7 +112,8 @@
                        </label>
                    </div>
                    <?php endif; ?>
-                    <input type="file" id="couverture" name="couverture" accept="image/jpeg,image/png">
+                    <input type="file" id="couverture" name="couverture" accept="image/jpeg,image/png" data-preview="fp-couverture">
+                    <div id="fp-couverture" class="file-preview-list" aria-live="polite"></div>
                    <small><?= empty($currentCover) ? 'JPG, PNG. Max 10 MB.' : 'Laisser vide pour conserver la couverture actuelle. JPG, PNG. Max 10 MB.' ?></small>
                </div>
            </div>
@@ -149,7 +150,9 @@
                <label for="files">Ajouter des fichiers du TFE :</label>
                <div class="admin-file-input">
                    <input type="file" id="files" name="files[]" multiple
-                           accept=".pdf,.jpg,.jpeg,.png,.mp4,.zip,.vtt">
+                           accept=".pdf,.jpg,.jpeg,.png,.mp4,.zip,.vtt"
+                           data-preview="fp-files">
+                    <div id="fp-files" class="file-preview-list" aria-live="polite"></div>
                    <small>PDF, JPG, PNG, MP4, ZIP. Max 50 MB par fichier. Pour les vidéos, un fichier .vtt de sous-titres peut être joint.</small>
                </div>
            </div>
@@ -167,7 +170,8 @@
                        </label>
                    </div>
                    <?php endif; ?>
-                    <input type="file" name="banner" accept="image/jpeg,image/png,image/webp">
+                    <input type="file" name="banner" id="banner" accept="image/jpeg,image/png,image/webp" data-preview="fp-banner">
+                    <div id="fp-banner" class="file-preview-list" aria-live="polite"></div>
                    <small><?= empty($thesis['banner_path']) ? 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.' : 'Laisser vide pour conserver la bannière actuelle. JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.' ?></small>
                </div>
            </div>
--- a/app/templates/admin/recapitulatif.php
+++ b/app/templates/admin/recapitulatif.php
@@ -84,19 +84,41 @@
        <?php if (!empty($files)): ?>
        <section>
            <h2>Fichiers</h2>
-            <table>
-                <thead><tr><th scope="col">Type</th><th scope="col">Fichier</th><th scope="col">Taille</th><th scope="col">Date</th></tr></thead>
-                <tbody>
-                    <?php foreach ($files as $f): ?>
-                    <tr>
-                        <td><?= htmlspecialchars($f['file_type']) ?></td>
-                        <td><?= htmlspecialchars($f['file_name']) ?></td>
-                        <td><?= formatFileSize($f['file_size']) ?></td>
-                        <td><?= date('d/m/Y H:i', strtotime($f['uploaded_at'])) ?></td>
-                    </tr>
-                    <?php endforeach; ?>
-                </tbody>
-            </table>
+            <ul class="recap-file-list">
+                <?php foreach ($files as $f): ?>
+                <?php
+                    $mime     = $f['mime_type'] ?? '';
+                    $isImage  = str_starts_with($mime, 'image/');
+                    $mediaUrl = '/media.php?path=' . urlencode($f['file_path']);
+                    $fileName = htmlspecialchars($f['file_name'] ?? basename($f['file_path']));
+                    $fileType = htmlspecialchars($f['file_type']);
+                ?>
+                <li class="recap-file-item">
+                    <?php if ($isImage): ?>
+                    <a href="<?= $mediaUrl ?>" target="_blank" rel="noopener" class="recap-file-thumb-link">
+                        <img src="<?= $mediaUrl ?>" alt="<?= $fileName ?>" class="recap-file-thumb" loading="lazy">
+                    </a>
+                    <?php else: ?>
+                    <span class="recap-file-icon">
+                        <?php
+                        if ($mime === 'application/pdf')   echo '📄';
+                        elseif (str_starts_with($mime, 'video/')) echo '🎬';
+                        elseif (str_starts_with($mime, 'audio/')) echo '🎵';
+                        elseif (in_array($mime, ['application/zip','application/x-zip-compressed'])) echo '🗜️';
+                        elseif (str_ends_with($f['file_name'] ?? '', '.vtt')) echo '💬';
+                        else echo '📎';
+                        ?>
+                    </span>
+                    <?php endif; ?>
+                    <div class="recap-file-meta">
+                        <a href="<?= $mediaUrl ?>" target="_blank" rel="noopener" class="recap-file-name"><?= $fileName ?></a>
+                        <span class="recap-file-type-badge"><?= $fileType ?></span>
+                        <span class="recap-file-size"><?= formatFileSize($f['file_size']) ?></span>
+                        <span class="recap-file-date"><?= date('d/m/Y H:i', strtotime($f['uploaded_at'])) ?></span>
+                    </div>
+                </li>
+                <?php endforeach; ?>
+            </ul>
        </section>
        <?php endif; ?>

--- a/app/templates/head.php
+++ b/app/templates/head.php
@@ -69,6 +69,9 @@
    <?php foreach ($extraCss ?? [] as $css): ?>
    <link rel="stylesheet" href="<?= App::assetV($css) ?>">
    <?php endforeach; ?>
+    <?php foreach ($extraJs ?? [] as $js): ?>
+    <script src="<?= App::assetV($js) ?>" defer></script>
+    <?php endforeach; ?>
    <?php if (php_sapi_name() === 'cli-server'): ?>
    <script>
        (function poll(){
--- a/app/templates/partials/form/file-field.php
+++ b/app/templates/partials/form/file-field.php
@@ -15,6 +15,7 @@ $accept   = $accept   ?? '';
 $hint     = $hint     ?? null;
 $multiple = $multiple ?? false;
 $id       = $id       ?? $name;
+$previewId = 'fp-' . htmlspecialchars($id);
 ?>
 <div>
    <label for="<?= htmlspecialchars($id) ?>"><?= htmlspecialchars($label) ?></label>
@@ -23,11 +24,13 @@ $id       = $id       ?? $name;
               id="<?= htmlspecialchars($id) ?>"
               name="<?= htmlspecialchars($name) ?><?= $multiple ? '[]' : '' ?>"
               <?= $accept   ? 'accept="'   . htmlspecialchars($accept)  . '"' : '' ?>
-               <?= $multiple ? 'multiple' : '' ?>>
+               <?= $multiple ? 'multiple' : '' ?>
+               data-preview="<?= $previewId ?>">
+        <div id="<?= $previewId ?>" class="file-preview-list" aria-live="polite"></div>
        <?php if ($hint): ?>
        <small><?= htmlspecialchars($hint) ?></small>
        <?php endif; ?>
    </div>
 </div>
 <?php
-unset($accept, $hint, $multiple, $id);
+unset($accept, $hint, $multiple, $id, $previewId);