refactor: session-based incremental TFE upload via HTMX, drop SortableJS

Replace the client-side FileArray + Sortable drag-to-reorder with a server-side session-based upload flow: - New endpoints: /partage/upload-tfe-file, /partage/remove-tfe-file (and /admin/ variants) — single-file incremental upload via HTMX multipart/form-data with progress bar support - Session storage: uploaded files go to STORAGE_ROOT/uploads/{session_id}/ with metadata in $_SESSION['tfe_uploads'] - file-upload-queue.js reduced to single-file previews only (couverture, note_intention, annexes thumbnails) - ThesisFileHandler gains handleTfeFilesFromSession + writeTfeFileFromSrc + cleanupSessionUploads for final commit from session temp - Sortable.min.js removed from all script tags; drag handles and ghost CSS removed - No file_orders[]/file_labels[] hidden field injection needed - Upload queue survives page refresh (server-owned list) This eliminates the SortableJS dependency entirely while keeping the same UX: pick files, see them in a queue, remove individual files.
2026-06-25 16:19:19 +02:00 · 2026-05-10 16:19:46 +02:00
parent e06a317499
commit ca7707cd47
20 changed files with 606 additions and 255 deletions
--- a/app/public/admin/add.php
+++ b/app/public/admin/add.php
@@ -55,7 +55,7 @@ function wasSelected($key, $value) {
 $isAdmin = true;
 $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.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
@@ -40,7 +40,7 @@ try {

 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/edit.php';
--- a/app/public/admin/remove-tfe-file.php
+++ b/app/public/admin/remove-tfe-file.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * remove-tfe-file.php (admin)
+ *
+ * Admin-gated wrapper for the remove-tfe-file fragment.
+ */
+require_once __DIR__ . '/../../bootstrap.php';
+require_once __DIR__ . '/../../src/AdminAuth.php';
+App::boot();
+AdminAuth::requireLogin();
+
+require_once __DIR__ . '/../partage/remove-tfe-file.php';
--- a/app/public/admin/upload-tfe-file.php
+++ b/app/public/admin/upload-tfe-file.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * upload-tfe-file.php (admin)
+ *
+ * Admin-gated wrapper for the upload-tfe-file fragment.
+ */
+require_once __DIR__ . '/../../bootstrap.php';
+require_once __DIR__ . '/../../src/AdminAuth.php';
+App::boot();
+AdminAuth::requireLogin();
+
+require_once __DIR__ . '/../partage/upload-tfe-file.php';
--- a/app/public/assets/css/form.css
+++ b/app/public/assets/css/form.css
@@ -555,7 +555,8 @@
  border-color: var(--accent-primary);
 }

-.sortable-list {
+/* New-file queue items */
+.tfe-file-queue {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
@@ -565,11 +566,6 @@
  min-width: 0;
 }

-/* New-file queue items */
-.tfe-file-queue {
-  min-height: 0;
-}
-
 .tfe-queue-empty {
  font-size: var(--step--2);
  color: var(--text-tertiary);
@@ -591,28 +587,6 @@
  min-width: 0;
 }

-.fq-drag-handle,
-.admin-file-drag-handle {
-  cursor: grab;
-  color: var(--text-tertiary);
-  font-size: 1.1rem;
-  line-height: 1;
-  padding: 0 var(--space-3xs);
-  flex-shrink: 0;
-  user-select: none;
-}
-
-.fq-drag-handle:active,
-.admin-file-drag-handle:active {
-  cursor: grabbing;
-}
-
-.fq-ghost,
-.sortable-ghost {
-  opacity: 0.4;
-  background: var(--accent-muted, #f0f0f0);
-}
-
 .fq-icon {
  font-size: 1.3rem;
  line-height: 1;
--- a/app/public/assets/js/file-upload-queue.js
+++ b/app/public/assets/js/file-upload-queue.js
@@ -1,11 +1,11 @@
 /**
 * file-upload-queue.js
 *
- * Renders visual file queues for:
- *   1. #tfe-files-input  — multi-file upload with drag-to-reorder (SortableJS)
- *      and per-file label inputs. Injects hidden file_labels[] / file_orders[].
- *   2. input[data-preview] — single-file previews (couverture, note_intention, etc.)
- *   3. #existing-files-sortable — edit-mode sortable list
+ * Provides single-file previews for file inputs with the data-preview attribute
+ * (couverture, note_intention, annexes, etc.).
+ *
+ * The multi-file TFE queue is rendered server-side via HTMX fragments
+ * (upload-tfe-file.php / remove-tfe-file.php).
 *
 * Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
 * after swap without a global event listener.
@@ -52,127 +52,7 @@ window.XamxamInitFileUploads = function () {
 		});
 	}

-	// ── 1. TFE multi-file queue ────────────────────────────────────────────
-	var picker = document.getElementById("tfe-files-input");
-	var queue = document.getElementById("tfe-file-queue");
-	var empty = document.getElementById("tfe-file-queue-empty");
-	var sortHint = document.getElementById("tfe-file-queue-sort-hint");
-	if (picker && queue) {
-		console.log(
-			"[file-upload-queue] init TFE queue picker=",
-			picker,
-			"multiple=",
-			picker.multiple,
-		);
-		var fileArray = [];
-
-		if (typeof Sortable !== "undefined") {
-			Sortable.create(queue, {
-				animation: 150,
-				handle: ".fq-drag-handle",
-				ghostClass: "fq-ghost",
-				onEnd: function () {
-					var items = queue.querySelectorAll(".fq-item");
-					var newArr = Array.prototype.map.call(items, function (li) {
-						return fileArray[parseInt(li.getAttribute("data-idx"), 10)];
-					});
-					fileArray = newArr;
-					renderQueue();
-				},
-			});
-		}
-
-		picker.onchange = function () {
-			console.log(
-				"[file-upload-queue] onchange fired, files count:",
-				picker.files.length,
-				"names:",
-				Array.from(picker.files).map(function (f) {
-					return f.name;
-				}),
-			);
-			fileArray = fileArray.concat(Array.from(picker.files));
-			console.log(
-				"[file-upload-queue] fileArray after concat, length:",
-				fileArray.length,
-			);
-			picker.value = "";
-			renderQueue();
-		};
-
-		function renderQueue() {
-			queue.innerHTML = "";
-			if (!fileArray.length) {
-				empty.style.display = "";
-				if (sortHint) sortHint.style.display = "none";
-				injectHiddenFields([]);
-				return;
-			}
-			empty.style.display = "none";
-			if (sortHint) sortHint.style.display = "";
-			fileArray.forEach(function (file, idx) {
-				var li = document.createElement("li");
-				li.className = "fq-item";
-				li.setAttribute("data-idx", idx);
-				li.innerHTML =
-					'<span class="fq-drag-handle" title="R\u00e9ordonner">\u2820</span>' +
-					'<span class="fq-icon">' +
-					iconFor(file) +
-					"</span>" +
-					'<span class="fq-info"><span class="fq-name">' +
-					esc(file.name) +
-					"</span>" +
-					'<span class="fq-size">' +
-					humanSize(file.size) +
-					"</span></span>" +
-					'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' +
-					esc(file.name) +
-					'">&#x2715;</button>';
-				li.querySelector(".fq-remove").onclick = (function (i) {
-					return function () {
-						fileArray.splice(i, 1);
-						renderQueue();
-					};
-				})(idx);
-				queue.appendChild(li);
-			});
-			injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
-		}
-
-		function injectHiddenFields(items) {
-			var form = picker.closest("form");
-			if (!form) return;
-			form
-				.querySelectorAll(".fq-hidden-label, .fq-hidden-order")
-				.forEach(function (el) {
-					el.remove();
-				});
-			items.forEach(function (li, sortedIdx) {
-				var label = li.querySelector(".fq-label");
-				var lInp = document.createElement("input");
-				lInp.type = "hidden";
-				lInp.name = "file_labels[]";
-				lInp.value = label ? label.value : "";
-				lInp.className = "fq-hidden-label";
-				form.appendChild(lInp);
-				var oInp = document.createElement("input");
-				oInp.type = "hidden";
-				oInp.name = "file_orders[]";
-				oInp.value = sortedIdx + 1;
-				oInp.className = "fq-hidden-order";
-				form.appendChild(oInp);
-			});
-		}
-
-		// On submit, refresh hidden fields from current queue state
-		var form = picker.closest("form");
-		if (form)
-			form.addEventListener("submit", function () {
-				injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
-			});
-	}
-
-	// ── 2. Single-file previews (data-preview attribute) ────────────────────
+	// ── Single-file previews (data-preview attribute) ────────────────────
 	document
 		.querySelectorAll('input[type="file"][data-preview]')
 		.forEach(function (input) {
@@ -221,32 +101,6 @@ window.XamxamInitFileUploads = function () {
 				});
 			};
 		});
-
-	// ── 3. Existing-files sortable (edit mode) ──────────────────────────────
-	var sortList = document.getElementById("existing-files-sortable");
-	if (sortList && typeof Sortable !== "undefined") {
-		Sortable.create(sortList, {
-			animation: 150,
-			handle: ".admin-file-drag-handle",
-			ghostClass: "fq-ghost",
-			onEnd: function () {
-				sortList
-					.querySelectorAll('input[name="file_sort_order[]"]')
-					.forEach(function (el) {
-						el.remove();
-					});
-				sortList
-					.querySelectorAll(".admin-file-list-item[data-file-id]")
-					.forEach(function (li) {
-						var inp = document.createElement("input");
-						inp.type = "hidden";
-						inp.name = "file_sort_order[]";
-						inp.value = li.getAttribute("data-file-id");
-						li.prepend(inp);
-					});
-			},
-		});
-	}
 };

 // Bootstrap on page load
--- a/app/public/partage/fichiers-fragment.php
+++ b/app/public/partage/fichiers-fragment.php
@@ -160,18 +160,47 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
    <div class="admin-form-group admin-files-fieldgroup">
        <label>TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
        <div class="admin-file-input">
-            <input type="file" id="tfe-files-input"
-                   name="files[]" multiple
-                   accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
-                   class="tfe-file-picker">
+            <?php
+            $tfeUploadUrl = $adminMode ? '/admin/upload-tfe-file.php' : '/partage/upload-tfe-file';
+            $tfeRemoveUrl = $adminMode ? '/admin/remove-tfe-file.php' : '/partage/remove-tfe-file';
+            $tfeValidateUrl = $adminMode ? '/admin/validate-file-fragment.php' : '/partage/validate-file-fragment';
+            ?>
+            <!-- Inline validation form (scoped) -->
+            <form class="file-validation-form"
+                  hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
+                  hx-encoding="multipart/form-data"
+                  hx-trigger="change from:#tfe-files-input"
+                  hx-target="find .file-validation-msg"
+                  hx-swap="innerHTML"
+                  hx-sync="replace">
+                <input type="hidden" name="field_name" value="tfe">
+                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
+                <input type="file" id="tfe-files-input"
+                       name="tfe"
+                       accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
+                       class="tfe-file-picker"
+                       hx-encoding="multipart/form-data"
+                       hx-post="<?= htmlspecialchars($tfeUploadUrl) ?>"
+                       hx-target="#tfe-file-queue-container"
+                       hx-select="#tfe-file-queue-container"
+                       hx-swap="outerHTML"
+                       hx-trigger="change"
+                       hx-include="[name='csrf_token'], [name='admin_mode']">
+                <div class="file-validation-msg" aria-live="polite"></div>
+            </form>
+            <progress id="tfe-upload-progress" value="0" max="100" style="display:none;width:100%;margin-top:var(--space-3xs);"></progress>
            <small class="admin-file-hint">
                PDF (max 100 MB) · Images (JPG/PNG/GIF/WEBP).
                PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
            </small>
-            <ul id="tfe-file-queue" class="tfe-file-queue sortable-list"
-                aria-label="Fichiers sélectionnés (réordonnable)"></ul>
-            <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
-            <small class="admin-file-hint" id="tfe-file-queue-sort-hint" style="display:none;">Glissez-déposez les fichiers pour déterminer l'ordre d'affichage sur la page du TFE.</small>
+            <div id="tfe-file-queue-container">
+                <?php
+                // Render initial queue state from session
+                $initialUploads = $_SESSION['tfe_uploads'] ?? [];
+                require_once APP_ROOT . '/public/partage/tfe-queue-helper.php';
+                renderQueueFragment($initialUploads, $tfeRemoveUrl);
+                ?>
+            </div>
        </div>
    </div>

@@ -224,10 +253,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
        <?php if ($peerTubeEnabled): ?>
        <div class="admin-form-group">
            <label for="peertube_video">Fichier vidéo (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input">
+            <div class="admin-file-input"
+                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
+                 hx-encoding="multipart/form-data"
+                 hx-trigger="change from:#peertube_video"
+                 hx-target="find .file-validation-msg"
+                 hx-swap="innerHTML"
+                 hx-sync="replace"
+                 hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_video">
+                <input type="hidden" name="field_name" value="tfe">
+                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
                <input type="file" id="peertube_video" name="peertube_video"
                       accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
                       <?= !$adminMode ? 'required' : '' ?>>
+                <div class="file-validation-msg" aria-live="polite"></div>
                <small>MP4, WebM ou MOV. La vidéo sera hébergée sur PeerTube et intégrée
                comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
            </div>
@@ -235,10 +274,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
        <?php else: ?>
        <div class="admin-form-group">
            <label for="tfe-video-upload">Fichier vidéo<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input">
+            <div class="admin-file-input"
+                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
+                 hx-encoding="multipart/form-data"
+                 hx-trigger="change from:#tfe-video-upload"
+                 hx-target="find .file-validation-msg"
+                 hx-swap="innerHTML"
+                 hx-sync="replace"
+                 hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-video-upload">
+                <input type="hidden" name="field_name" value="tfe">
+                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
                <input type="file" id="tfe-video-upload" name="files[]"
                       accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
                       <?= !$adminMode ? 'required' : '' ?>>
+                <div class="file-validation-msg" aria-live="polite"></div>
                <small>MP4, WebM ou MOV. Max 500 MB.</small>
            </div>
        </div>
@@ -249,10 +298,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
        <?php if ($peerTubeEnabled): ?>
        <div class="admin-form-group">
            <label for="peertube_audio">Fichier audio (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input">
+            <div class="admin-file-input"
+                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
+                 hx-encoding="multipart/form-data"
+                 hx-trigger="change from:#peertube_audio"
+                 hx-target="find .file-validation-msg"
+                 hx-swap="innerHTML"
+                 hx-sync="replace"
+                 hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_audio">
+                <input type="hidden" name="field_name" value="tfe">
+                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
                <input type="file" id="peertube_audio" name="peertube_audio"
                       accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
                       <?= !$adminMode ? 'required' : '' ?>>
+                <div class="file-validation-msg" aria-live="polite"></div>
                <small>MP3, OGG, WAV, FLAC ou AAC. Le fichier sera hébergé sur PeerTube et intégré
                comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
            </div>
@@ -260,10 +319,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
        <?php else: ?>
        <div class="admin-form-group">
            <label for="tfe-audio-upload">Fichier audio<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input">
+            <div class="admin-file-input"
+                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
+                 hx-encoding="multipart/form-data"
+                 hx-trigger="change from:#tfe-audio-upload"
+                 hx-target="find .file-validation-msg"
+                 hx-swap="innerHTML"
+                 hx-sync="replace"
+                 hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-audio-upload">
+                <input type="hidden" name="field_name" value="tfe">
+                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
                <input type="file" id="tfe-audio-upload" name="files[]"
                       accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
                       <?= !$adminMode ? 'required' : '' ?>>
+                <div class="file-validation-msg" aria-live="polite"></div>
                <small>MP3, OGG, WAV, FLAC ou AAC. Max 500 MB.</small>
            </div>
        </div>
@@ -273,5 +342,21 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);

 </fieldset><!-- /Fichiers -->

-<script>if(window.XamxamInitFileUploads)window.XamxamInitFileUploads()</script>
+<script>
+if(window.XamxamInitFileUploads)window.XamxamInitFileUploads();
+// TFE upload progress bar
+(function(){
+  var input = document.getElementById('tfe-files-input');
+  var prog = document.getElementById('tfe-upload-progress');
+  if (!input || !prog) return;
+  input.addEventListener('htmx:xhr:progress', function(evt) {
+    prog.style.display = '';
+    prog.setAttribute('value', evt.detail.loaded / evt.detail.total * 100);
+  });
+  input.addEventListener('htmx:afterRequest', function() {
+    prog.style.display = 'none';
+    prog.setAttribute('value', 0);
+  });
+})();
+</script>
 </div><!-- #format-fichiers-block -->
--- a/app/public/partage/index.php
+++ b/app/public/partage/index.php
@@ -43,6 +43,22 @@ if ($slug === 'validate-file-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST')
    exit;
 }

+// Special route: /partage/upload-tfe-file (HTMX fragment — upload single TFE file)
+if ($slug === 'upload-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
+    App::boot();
+    App::verifyCsrf();
+    require_once __DIR__ . '/upload-tfe-file.php';
+    exit;
+}
+
+// Special route: /partage/remove-tfe-file (HTMX fragment — remove single TFE file)
+if ($slug === 'remove-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
+    App::boot();
+    App::verifyCsrf();
+    require_once __DIR__ . '/remove-tfe-file.php';
+    exit;
+}
+
 // Special route: /partage/fichiers-fragment (HTMX fragment — format-aware fichiers block)
 if ($slug === 'fichiers-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST') {
    App::boot();
@@ -371,7 +387,6 @@ function renderShareLinkForm(string $slug, array $link): void
        <meta name="theme-color" content="#ffffff">
        <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/sortable.min.js') ?>" defer></script>
        <script src="<?= App::assetV('/assets/js/file-upload-queue.js') ?>" defer></script>
        <script src="<?= App::assetV('/assets/js/beforeunload-guard.js') ?>" defer></script>
        <script src="<?= App::assetV('/assets/js/htmx.min.js') ?>" defer></script>
--- a/app/public/partage/remove-tfe-file.php
+++ b/app/public/partage/remove-tfe-file.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * remove-tfe-file.php (partage)
+ *
+ * HTMX fragment: removes a file from the TFE upload queue (session + temp
+ * directory) and returns the updated queue HTML fragment.
+ *
+ * Expected POST:
+ *   index  — the numeric index of the file to remove
+ */
+
+require_once __DIR__ . '/../../bootstrap.php';
+App::boot();
+App::verifyCsrf();
+
+$index = isset($_POST['index']) ? (int)$_POST['index'] : -1;
+$uploads = $_SESSION['tfe_uploads'] ?? [];
+
+if ($index < 0 || $index >= count($uploads)) {
+    http_response_code(400);
+    echo '<p class="tfe-queue-empty">Index invalide.</p>';
+    exit;
+}
+
+// ── Delete temp file ───────────────────────────────────────────────────────
+$entry = $uploads[$index];
+$absPath = STORAGE_ROOT . '/' . $entry['tmp_path'];
+if (file_exists($absPath)) {
+    unlink($absPath);
+}
+
+// ── Remove from session ────────────────────────────────────────────────────
+array_splice($_SESSION['tfe_uploads'], $index, 1);
+
+// ── Clean up empty temp directory ──────────────────────────────────────────
+$sessionId = session_id();
+$tempDir   = STORAGE_ROOT . '/uploads/' . $sessionId;
+$_SESSION['tfe_uploads'] = array_values($_SESSION['tfe_uploads']);
+
+if (empty($_SESSION['tfe_uploads']) && is_dir($tempDir)) {
+    // Remove dir only if empty (rmdir fails if not empty, which is fine)
+    @rmdir($tempDir);
+}
+
+// ── Render updated queue ───────────────────────────────────────────────────
+require_once __DIR__ . '/tfe-queue-helper.php';
+renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');
--- a/app/public/partage/tfe-queue-helper.php
+++ b/app/public/partage/tfe-queue-helper.php
@@ -0,0 +1,78 @@
+<?php
+/**
+ * Shared fragment helper for rendering the TFE file upload queue.
+ *
+ * Used by both upload-tfe-file.php and remove-tfe-file.php.
+ *
+ * @param array  $uploads   Array of ['tmp_path', 'orig_name', 'size', 'mime']
+ * @param string $removeUrl URL endpoint for removing files (e.g. '/partage/remove-tfe-file')
+ */
+
+function renderQueueFragment(array $uploads, string $removeUrl = '/partage/remove-tfe-file'): void
+{
+    $ICON = [
+        'pdf'   => "\u{1F4C4}",
+        'video' => "\u{1F3AC}",
+        'audio' => "\u{1F50A}",
+        'zip'   => "\u{1F5DC}\u{FE0F}",
+        'vtt'   => "\u{1F4AC}",
+        'image' => "\u{1F5BC}\u{FE0F}",
+        'other' => "\u{1F4CE}",
+    ];
+
+    $iconFor = function (string $name, string $mime) use ($ICON): string {
+        if (str_starts_with($mime, 'image/')) return $ICON['image'];
+        if ($mime === 'application/pdf' || str_ends_with(strtolower($name), '.pdf')) return $ICON['pdf'];
+        if (str_starts_with($mime, 'video/') || preg_match('/\.(mp4|webm|mov|ogv)$/i', $name)) return $ICON['video'];
+        if (str_starts_with($mime, 'audio/') || preg_match('/\.(mp3|ogg|oga|wav|flac|aac|m4a)$/i', $name)) return $ICON['audio'];
+        if (preg_match('/\.(zip|tar|gz|tgz)$/i', $name)) return $ICON['zip'];
+        if (preg_match('/\.vtt$/i', $name)) return $ICON['vtt'];
+        return $ICON['other'];
+    };
+
+    $humanSize = function (int $b): string {
+        return $b >= 1073741824
+            ? number_format($b / 1073741824, 2) . ' GB'
+            : ($b >= 1048576
+                ? number_format($b / 1048576, 2) . ' MB'
+                : ($b >= 1024
+                    ? number_format($b / 1024, 1) . ' KB'
+                    : $b . ' B'));
+    };
+
+    if (empty($uploads)) {
+        echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
+           . ' aria-label="Fichiers sélectionnés"></ul>'
+           . "\n"
+           . '<p id="tfe-file-queue-empty" class="tfe-queue-empty">'
+           . 'Aucun fichier sélectionné.</p>';
+        return;
+    }
+
+    echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
+       . ' aria-label="Fichiers sélectionnés">';
+    foreach ($uploads as $idx => $f) {
+        $icon = $iconFor($f['orig_name'], $f['mime']);
+        $name = htmlspecialchars($f['orig_name']);
+        $size = $humanSize($f['size']);
+        echo '<li class="fq-item">'
+           . '<span class="fq-icon">' . $icon . '</span>'
+           . '<span class="fq-info">'
+           . '<span class="fq-name">' . $name . '</span>'
+           . '<span class="fq-size">' . $size . '</span>'
+           . '</span>'
+           . '<button type="button" class="admin-btn-remove fq-remove"'
+           . ' aria-label="Retirer ' . $name . '"'
+           . ' hx-post="' . htmlspecialchars($removeUrl) . '"'
+           . ' hx-target="#tfe-file-queue-container"'
+           . ' hx-select="#tfe-file-queue-container"'
+           . ' hx-swap="outerHTML"'
+           . ' hx-vals=\'{"index":' . $idx . '}\''
+           . ' hx-include="[name=\'csrf_token\']"'
+           . '>&#x2715;</button>'
+           . '</li>';
+    }
+    echo '</ul>';
+    echo '<p id="tfe-file-queue-empty" class="tfe-queue-empty" style="display:none">'
+       . 'Aucun fichier sélectionné.</p>';
+}
--- a/app/public/partage/upload-tfe-file.php
+++ b/app/public/partage/upload-tfe-file.php
@@ -0,0 +1,119 @@
+<?php
+/**
+ * upload-tfe-file.php (partage)
+ *
+ * HTMX fragment: receives a single file upload, stores it in a session-scoped
+ * temp directory, appends it to the TFE upload queue, and returns the updated
+ * queue HTML fragment.
+ *
+ * Expected POST:
+ *   file  — the uploaded file (single file, not array)
+ *
+ * Session structure:
+ *   $_SESSION['tfe_uploads'] = [
+ *     ['tmp_path' => '...', 'orig_name' => '...', 'size' => ..., 'mime' => '...'],
+ *     ...
+ *   ]
+ */
+
+require_once __DIR__ . '/../../bootstrap.php';
+App::boot();
+App::verifyCsrf();
+
+// ── Validate upload ────────────────────────────────────────────────────────
+$upload = $_FILES['tfe'] ?? null;
+if (!$upload || !isset($upload['error']) || $upload['error'] !== UPLOAD_ERR_OK) {
+    http_response_code(400);
+    echo '<p class="tfe-queue-empty">Erreur lors du téléchargement.</p>';
+    exit;
+}
+
+// ── MIME + size validation ─────────────────────────────────────────────────
+$adminMode = ($_POST['admin_mode'] ?? '0') === '1';
+$finfo     = new \finfo(FILEINFO_MIME_TYPE);
+$mimeType  = $finfo->file($upload['tmp_name']);
+$ext       = strtolower(pathinfo($upload['name'], PATHINFO_EXTENSION));
+
+if ($mimeType === 'text/plain' && $ext === 'vtt') {
+    $mimeType = 'text/vtt';
+}
+
+$allowedMimes = [
+    'application/pdf',
+    'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+    'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
+    'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
+    'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
+    'text/vtt',
+    'application/zip', 'application/x-zip-compressed',
+    'application/x-tar', 'application/gzip',
+    'application/octet-stream',
+];
+$allowedExts = [
+    'jpg', 'jpeg', 'png', 'gif', 'webp', 'pdf',
+    'mp4', 'webm', 'ogv', 'mov',
+    'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
+    'vtt', 'zip', 'tar', 'gz', 'tgz',
+];
+
+$mimeOk = in_array($mimeType, $allowedMimes, true)
+       || ($mimeType === 'application/octet-stream' && in_array($ext, $allowedExts, true))
+       || in_array($ext, $allowedExts, true);
+
+if (!$mimeOk && !$adminMode) {
+    http_response_code(400);
+    echo '<p class="tfe-queue-empty">Type de fichier non accepté : ' . htmlspecialchars($upload['name']) . '</p>';
+    exit;
+}
+
+$maxSize = ($mimeType === 'application/pdf' || $ext === 'pdf') ? 100 * 1024 * 1024 : 500 * 1024 * 1024;
+if ($upload['size'] > $maxSize && !$adminMode) {
+    $maxMb = round($maxSize / 1024 / 1024);
+    http_response_code(400);
+    echo '<p class="tfe-queue-empty">Fichier trop volumineux (' . round($upload['size'] / 1024 / 1024, 1) . ' MB). Maximum : ' . $maxMb . ' MB.</p>';
+    exit;
+}
+
+// ── Session temp directory ─────────────────────────────────────────────────
+$sessionId  = session_id();
+$tempDir    = STORAGE_ROOT . '/uploads/' . $sessionId;
+if (!is_dir($tempDir)) {
+    mkdir($tempDir, 0755, true);
+}
+
+// ── Move uploaded file to temp ─────────────────────────────────────────────
+$origName  = basename($upload['name']);
+$ext       = strtolower(pathinfo($origName, PATHINFO_EXTENSION));
+
+// Generate a unique temp name to avoid collisions
+$uniqueId  = bin2hex(random_bytes(8));
+$tmpName   = 'tmp_' . $uniqueId . ($ext ? '.' . $ext : '');
+$tmpPath   = $tempDir . '/' . $tmpName;
+
+if (!move_uploaded_file($upload['tmp_name'], $tmpPath)) {
+    http_response_code(500);
+    echo '<p class="tfe-queue-empty">Erreur lors de la sauvegarde du fichier.</p>';
+    exit;
+}
+
+chmod($tmpPath, 0644);
+
+// Determine MIME type
+$finfo    = new \finfo(FILEINFO_MIME_TYPE);
+$mimeType = $finfo->file($tmpPath);
+
+// ── Store in session ───────────────────────────────────────────────────────
+if (!isset($_SESSION['tfe_uploads']) || !is_array($_SESSION['tfe_uploads'])) {
+    $_SESSION['tfe_uploads'] = [];
+}
+
+$_SESSION['tfe_uploads'][] = [
+    'tmp_path'  => 'uploads/' . $sessionId . '/' . $tmpName,
+    'orig_name' => $origName,
+    'size'      => $upload['size'],
+    'mime'      => $mimeType,
+];
+
+// ── Render updated queue ───────────────────────────────────────────────────
+require_once __DIR__ . '/tfe-queue-helper.php';
+renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');