Replace HTMX+PHP file upload queues with client-side JS

Drops the session-backed HTMX incremental upload system in favour of a single JS module that manages `File` objects client-side and injects them into `FormData` on submit. Key changes: * `file-upload-queue.js`: client-side queues with validation, reorder (SortableJS), removal, dirty-state tracking, and fetch-based submit with manual redirect handling * `fichiers-fragment.php`: empty queue containers for JS-managed queues; HTMX format switching still works with queue rehydration after swap; annexe uploads now support multiple files * Form UI cleanup: moved existing files and cover preview into the `Fichiers` fieldset (edit mode); removed redundant queue labels while keeping labels for single-file inputs (`couverture`, `note d'intention`); added delete buttons for existing files * `ThesisFileHandler.php`: added `handleTfeQueueFiles()`/`handleAnnexeQueueFiles()` reading from `$_FILES['queue_file']`; introduced `extractFilesSubArray()` for nested upload arrays; removed session-based queue handling * `ThesisCreateController.php` & `ThesisEditController.php`: switched to extracted `['queue_file']` uploads * `beforeunload-guard.js`: now also watches `window.__xamxamDirty` * Deleted obsolete PHP upload/remove/reorder queue endpoints for `partage` and `admin` * Cleaned up route dispatch in `partage/index.php` * Misc form and styling updates in templates/CSS * Added `docs/cms-migration-plan.html`
2026-06-25 16:19:19 +02:00 · 2026-05-10 17:16:25 +02:00
parent 98ed83fac2
commit 13d26ded66
20 changed files with 2063 additions and 753 deletions
--- a/app/public/assets/css/form.css
+++ b/app/public/assets/css/form.css
@@ -641,6 +641,25 @@
  flex-shrink: 0;
 }

+.fq-drag-handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--text-tertiary);
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0 var(--space-3xs);
+  user-select: none;
+  touch-action: none;
+}
+
+.fq-drag-handle:active {
+  cursor: grabbing;
+}
+
+.fq-container {
+  /* wrapper div emitted by renderQueueFragment */
+}
+
 /* ── Existing-files list (edit form) ─────────────────────────────────────── */

 .admin-file-list {
--- a/app/public/assets/js/beforeunload-guard.js
+++ b/app/public/assets/js/beforeunload-guard.js
@@ -2,6 +2,7 @@
 * Beforeunload guard — prompts the user before navigating away from unsaved changes.
 *
 * Attach to any form with a data-beforeunload-guard attribute.
+ * Also watches window.__xamxamDirty (set by file-upload-queue.js).
 * No effect when JavaScript is unavailable (form posts normally).
 */
 (() => {
@@ -13,11 +14,11 @@
    for (const form of forms) {
        form.addEventListener('input', () => { dirty = true; });
        form.addEventListener('change', () => { dirty = true; });
-        form.addEventListener('submit', () => { dirty = false; });
+        form.addEventListener('submit', () => { dirty = false; window.__xamxamDirty = false; });
    }

    window.addEventListener('beforeunload', (e) => {
-        if (dirty) {
+        if (dirty || window.__xamxamDirty) {
            e.preventDefault();
        }
    });
--- a/app/public/assets/js/file-upload-queue.js
+++ b/app/public/assets/js/file-upload-queue.js
@@ -1,17 +1,31 @@
 /**
 * file-upload-queue.js
 *
- * Provides single-file previews for file inputs with the data-preview attribute
- * (couverture, note_intention, annexes, etc.).
+ * Client-side file upload queues for TFE, Video, Audio, and Annexe files.
+ * Replaces the old HTMX+PHP session-backed queue system.
 *
- * The multi-file TFE queue is rendered server-side via HTMX fragments
- * (upload-tfe-file.php / remove-tfe-file.php).
+ * Queues:
+ *   tfe    — main thesis files (multi-format)
+ *   video  — video files (non-PeerTube path)
+ *   audio  — audio files (non-PeerTube path)
+ *   annexe — annex files
 *
- * Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
- * after swap without a global event listener.
+ * Architecture:
+ *   1. Intercept 'change' on all .tfe-file-picker inputs.
+ *   2. Validate MIME/extension/size client-side.
+ *   3. Store File objects in window.__xamxamQueues.
+ *   4. Render queue UI with SortableJS drag-to-reorder.
+ *   5. On form submit: inject all queued files into FormData and POST normally.
+ *
+ * The queue containers are rendered server-side by fichiers-fragment.php
+ * as empty <ul> elements with standard IDs.  This script populates them.
 */
-window.XamxamInitFileUploads = function () {
-	console.log("[file-upload-queue] XamxamInitFileUploads called");
+
+(function () {
+	"use strict";
+
+	// ── Constants ──────────────────────────────────────────────────────────
+
 	var ICON = {
 		pdf: "\uD83D\uDCC4",
 		video: "\uD83C\uDFAC",
@@ -22,15 +36,46 @@ window.XamxamInitFileUploads = function () {
 		other: "\uD83D\uDCCE",
 	};

+	var QUEUE_TYPES = ["tfe", "video", "audio", "annexe"];
+
+	var ALLOWED_BY_TYPE = {
+		tfe: {
+			exts: ["jpg","jpeg","png","gif","webp","pdf","mp4","webm","ogv","mov","mp3","ogg","oga","wav","flac","aac","m4a","vtt","zip","tar","gz","tgz"],
+			maxSize: function (f) { return (/\.pdf$/i.test(f.name) ? 100 : 500) * 1024 * 1024; },
+		},
+		video: {
+			exts: ["mp4","webm","ogv","mov"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+		audio: {
+			exts: ["mp3","ogg","oga","wav","flac","aac","m4a"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+		annexe: {
+			exts: ["pdf","zip","tar","gz","tgz"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+	};
+
+	// ── State ──────────────────────────────────────────────────────────────
+
+	if (!window.__xamxamQueues) {
+		window.__xamxamQueues = {};
+	}
+	var queues = window.__xamxamQueues;
+	QUEUE_TYPES.forEach(function (qt) {
+		if (!Array.isArray(queues[qt])) queues[qt] = [];
+	});
+
+	// ── Helpers ────────────────────────────────────────────────────────────
+
 	function iconFor(file) {
-		var t = file.type || "",
-			n = file.name.toLowerCase();
+		var t = (file.type || "").toLowerCase(),
+			n = (file.name || "").toLowerCase();
 		if (/^image\//.test(t)) return ICON.image;
 		if (t === "application/pdf" || /\.pdf$/.test(n)) return ICON.pdf;
-		if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n))
-			return ICON.video;
-		if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n))
-			return ICON.audio;
+		if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICON.video;
+		if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICON.audio;
 		if (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
 		if (/\.vtt$/.test(n)) return ICON.vtt;
 		return ICON.other;
@@ -52,58 +97,356 @@ window.XamxamInitFileUploads = function () {
 		});
 	}

-	// ── Single-file previews (data-preview attribute) ────────────────────
-	document
-		.querySelectorAll('input[type="file"][data-preview]')
-		.forEach(function (input) {
-			if (input.id === "tfe-files-input") return;
-			console.log(
-				"[file-upload-queue] binding preview for",
-				input.id,
-				"multiple=",
-				input.multiple,
-			);
-			var container = document.getElementById(
-				input.getAttribute("data-preview"),
-			);
-			if (!container) return;
-			input.onchange = function () {
-				container.innerHTML = "";
-				Array.from(input.files).forEach(function (file) {
-					var item = document.createElement("div");
-					item.className = "fp-item";
-					if (/^image\//.test(file.type)) {
-						var img = document.createElement("img");
-						img.className = "fp-thumb";
-						img.alt = file.name;
-						var reader = new FileReader();
-						reader.onload = function (e) {
-							img.src = e.target.result;
-						};
-						reader.readAsDataURL(file);
-						item.appendChild(img);
-					} else {
-						var ic = document.createElement("span");
-						ic.className = "fp-icon";
-						ic.textContent = iconFor(file);
-						item.appendChild(ic);
-					}
-					var meta = document.createElement("span");
-					meta.className = "fp-meta";
-					meta.innerHTML =
-						'<span class="fp-name">' +
-						esc(file.name) +
-						'</span><span class="fp-size">' +
-						humanSize(file.size) +
-						"</span>";
-					item.appendChild(meta);
-					container.appendChild(item);
-				});
-			};
-		});
-};
+	function ext(fn) {
+		var m = fn.match(/\.([^./]+)$/);
+		return m ? m[1].toLowerCase() : "";
+	}

-// Bootstrap on page load
-if (document.readyState === "loading")
-	document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
-else window.XamxamInitFileUploads();
+	function genFileId() {
+		return "fq_" + Math.random().toString(36).slice(2, 10) + "_" + Date.now().toString(36);
+	}
+
+	// ── Validation ─────────────────────────────────────────────────────────
+
+	function validateFile(file, queueType) {
+		var rules = ALLOWED_BY_TYPE[queueType];
+		if (!rules) return "Type de file d'attente inconnu.";
+
+		var fileExt = ext(file.name);
+		if (fileExt && rules.exts.indexOf(fileExt) === -1) {
+			return "Type de fichier non accepté : ." + fileExt + " (" + file.name + ")";
+		}
+
+		var max = rules.maxSize(file);
+		if (file.size > max) {
+			var maxMb = Math.round(max / 1024 / 1024);
+			return "Fichier trop volumineux (" + (file.size / 1024 / 1024).toFixed(1) + " MB). Maximum : " + maxMb + " MB.";
+		}
+
+		return null;
+	}
+
+	// ── Rendering ──────────────────────────────────────────────────────────
+
+	function getQueueContainerId(qt) {
+		return {
+			tfe:    "tfe-file-queue-container",
+			video:  "video-file-queue-container",
+			audio:  "audio-file-queue-container",
+			annexe: "annexe-file-queue-container",
+		}[qt];
+	}
+
+	function getQueueUlId(qt) {
+		return {
+			tfe:    "tfe-file-queue",
+			video:  "video-file-queue",
+			audio:  "audio-file-queue",
+			annexe: "annexe-file-queue",
+		}[qt];
+	}
+
+	function getEmptyId(qt) {
+		return {
+			tfe:    "tfe-file-queue-empty",
+			video:  "video-file-queue-empty",
+			audio:  "audio-file-queue-empty",
+			annexe: "annexe-file-queue-empty",
+		}[qt];
+	}
+
+	function renderQueue(queueType) {
+		var container = document.getElementById(getQueueContainerId(queueType));
+		if (!container) return;
+
+		var files = queues[queueType];
+		var ulId   = getQueueUlId(queueType);
+		var emptyId  = getEmptyId(queueType);
+
+		var html = '<ul id="' + ulId + '" class="tfe-file-queue" aria-label="Fichiers sélectionnés">';
+		for (var i = 0; i < files.length; i++) {
+			var f  = files[i];
+			var ic = iconFor(f);
+			var id = f.__xamxamId || "";
+			html += '<li class="fq-item" data-fq-id="' + id + '">' +
+				'<span class="fq-drag-handle" aria-hidden="true">&#8942;</span>' +
+				'<span class="fq-icon">' + ic + '</span>' +
+				'<span class="fq-info">' +
+				'<span class="fq-name">' + esc(f.name) + '</span>' +
+				'<span class="fq-size">' + humanSize(f.size) + '</span>' +
+				'</span>' +
+				'<button type="button" class="admin-btn-remove fq-remove"' +
+				' aria-label="Retirer ' + esc(f.name) + '"' +
+				' data-action="xamxam-remove"' +
+				' data-queue="' + queueType + '"' +
+				' data-file-id="' + id + '">&#x2715;</button>' +
+				'</li>';
+		}
+		html += '</ul>';
+
+		var emptyStyle = files.length > 0 ? ' style="display:none"' : '';
+		html += '<p id="' + emptyId + '" class="tfe-queue-empty"' + emptyStyle + '>Aucun fichier sélectionné.</p>';
+
+		container.innerHTML = html;
+
+		// Wire Sortable
+		if (window.Sortable && files.length > 1) {
+			var list = container.querySelector("ul.tfe-file-queue");
+			if (list) {
+				Sortable.create(list, {
+					handle: ".fq-drag-handle",
+					animation: 150,
+					onEnd: function () {
+						reorderFromDOM(queueType);
+					},
+				});
+			}
+		}
+
+		// Mark form as dirty
+		markDirty();
+	}
+
+	function reorderFromDOM(queueType) {
+		var container = document.getElementById(getQueueContainerId(queueType));
+		if (!container) return;
+		var ids = Array.from(container.querySelectorAll("[data-fq-id]")).map(function (li) { return li.dataset.fqId; });
+		var files = queues[queueType];
+		var byId = {};
+		files.forEach(function (f) { byId[f.__xamxamId] = f; });
+		var reordered = ids.map(function (id) { return byId[id]; }).filter(Boolean);
+		files.forEach(function (f) {
+			if (reordered.indexOf(f) === -1) reordered.push(f);
+		});
+		queues[queueType] = reordered;
+		markDirty();
+	}
+
+	// ── Operations ─────────────────────────────────────────────────────────
+
+	function addFiles(queueType, newFiles) {
+		var errors = [];
+		var addedFiles = [];
+		for (var i = 0; i < newFiles.length; i++) {
+			var err = validateFile(newFiles[i], queueType);
+			if (err) {
+				errors.push(err);
+			} else {
+				newFiles[i].__xamxamId = genFileId();
+				addedFiles.push(newFiles[i]);
+			}
+		}
+
+		if (addedFiles.length > 0) {
+			queues[queueType] = queues[queueType].concat(addedFiles);
+			renderQueue(queueType);
+		}
+
+		return errors;
+	}
+
+	function removeFile(queueType, fileId) {
+		var idx = -1;
+		for (var i = 0; i < queues[queueType].length; i++) {
+			if (queues[queueType][i].__xamxamId === fileId) { idx = i; break; }
+		}
+		if (idx >= 0) {
+			queues[queueType].splice(idx, 1);
+			renderQueue(queueType);
+		}
+	}
+
+	// ── FormData injection on submit ───────────────────────────────────────
+
+	function injectQueuesIntoFormData(form, nativeFormData) {
+		var fd = nativeFormData || new FormData();
+		QUEUE_TYPES.forEach(function (qt) {
+			var files = queues[qt];
+			for (var i = 0; i < files.length; i++) {
+				fd.append("queue_file[" + qt + "][]", files[i], files[i].name);
+			}
+		});
+
+		// Append queue order hints so the server can validate user ordering
+		QUEUE_TYPES.forEach(function (qt) {
+			var ids = queues[qt].map(function (f) { return f.__xamxamId; });
+			if (ids.length > 0) {
+				fd.append("queue_order[" + qt + "]", JSON.stringify(ids));
+			}
+		});
+
+		return fd;
+	}
+
+	// ── Dirty tracking integration ─────────────────────────────────────────
+
+	function markDirty() {
+		// Set a global flag that beforeunload-guard.js can check
+		window.__xamxamDirty = true;
+	}
+
+	function markClean() {
+		window.__xamxamDirty = false;
+	}
+
+	// ── Validate callback for inline validation fragments ──────────────────
+
+	function showValidationMsg(input, msg) {
+		// Find the .file-validation-msg element scoped to this input's form
+		var form = input.closest(".file-validation-form");
+		var msgEl = form ? form.querySelector(".file-validation-msg") : null;
+		if (msgEl) {
+			msgEl.innerHTML = '<span class="file-validation-error">' + esc(msg) + '</span>';
+		}
+	}
+
+	function clearValidationMsg(input) {
+		var form = input.closest(".file-validation-form");
+		var msgEl = form ? form.querySelector(".file-validation-msg") : null;
+		if (msgEl) {
+			msgEl.innerHTML = "";
+		}
+	}
+
+	// ── Binding ────────────────────────────────────────────────────────────
+
+	function bindQueueInputs() {
+		document.querySelectorAll(".tfe-file-picker").forEach(function (input) {
+			if (input.dataset.xamxamBound) return;
+			input.dataset.xamxamBound = "1";
+
+			var queueType = null;
+			// Determine queue type from input attributes
+			if (input.id === "tfe-files-input") queueType = "tfe";
+			else if (input.id === "video-files-input") queueType = "video";
+			else if (input.id === "audio-files-input") queueType = "audio";
+			else if (input.id === "annexe-files-input") queueType = "annexe";
+			else if (input.getAttribute("hx-vals")) {
+				// Legacy: try to parse from hx-vals
+				try {
+					var vals = JSON.parse(input.getAttribute("hx-vals"));
+					if (vals && vals.queue_type && QUEUE_TYPES.indexOf(vals.queue_type) >= 0) {
+						queueType = vals.queue_type;
+					}
+				} catch (_) { /* ignore */ }
+			}
+
+			if (!queueType) return;
+
+			input.addEventListener("change", function () {
+				clearValidationMsg(input);
+				var files = Array.from(input.files || []);
+				var errors = addFiles(queueType, files);
+				if (errors.length > 0) {
+					showValidationMsg(input, errors.join("; "));
+				}
+				// Reset file input so the same file can be re-selected
+				input.value = "";
+			});
+		});
+	}
+
+	/**
+	 * Delegate click events for remove buttons (these are regenerated on
+	 * every renderQueue call, so live delegation is needed).
+	 */
+	function bindRemoveButtons() {
+		document.addEventListener("click", function (e) {
+			var btn = e.target.closest("button[data-action='xamxam-remove']");
+			if (!btn) return;
+			e.preventDefault();
+			var qt = btn.getAttribute("data-queue");
+			var fid = btn.getAttribute("data-file-id");
+			if (qt && fid) removeFile(qt, fid);
+		});
+	}
+
+	// ── Form submit interception ───────────────────────────────────────────
+
+	function bindFormSubmit() {
+		document.querySelectorAll("form[data-beforeunload-guard]").forEach(function (form) {
+			if (form.dataset.xamxamFormBound) return;
+			form.dataset.xamxamFormBound = "1";
+
+			form.addEventListener("submit", function (e) {
+				var hasFiles = QUEUE_TYPES.some(function (qt) { return queues[qt].length > 0; });
+				if (!hasFiles) return; // Normal submit
+
+				// Check if the form can accept multipart
+				if (form.enctype !== "multipart/form-data") return;
+
+				e.preventDefault();
+
+				// Build FormData from form fields + inject queued files
+				var fd = new FormData(form);
+
+				// Remove stale file input artifacts (consumed by change handler)
+				QUEUE_TYPES.forEach(function (qt) {
+					fd.delete("tfe");
+					fd.delete("video");
+					fd.delete("audio");
+					fd.delete("annexe");
+				});
+
+				fd = injectQueuesIntoFormData(form, fd);
+
+				markClean();
+
+				// Use fetch so we can inspect the response before navigation.
+				// The server either redirects (302 → we navigate to that URL)
+				// or returns the form page with errors (200 → replace the page).
+				fetch(form.getAttribute("action") || "", {
+					method: "POST",
+					body: fd,
+					redirect: "manual",
+				}).then(function (resp) {
+					if (resp.type === "opaqueredirect" || resp.status === 302 || resp.status === 301) {
+						// Browser redirect — navigate the whole page
+						window.location.href = resp.headers.get("Location") || form.getAttribute("action");
+						return;
+					}
+					// Success or error — render the HTML response
+					return resp.text();
+				}).then(function (html) {
+					if (!html) return;
+					document.open();
+					document.write(html);
+					document.close();
+					// Re-bind after DOM replacement (for error re-renders)
+					setTimeout(window.XamxamInitFileUploads, 0);
+				}).catch(function () {
+					// Network error — fall back to native submit
+					form.submit();
+				});
+			});
+		});
+	}
+
+	// ── Public API (called by HTMX afterSwap scripts) ──────────────────────
+
+	window.XamxamInitFileUploads = function () {
+		bindQueueInputs();
+	};
+
+	window.XamxamInitQueues = function () {
+		// Re-render all queues from in-memory state (used when format switching
+		// replaces the queues container via HTMX).
+		QUEUE_TYPES.forEach(function (qt) {
+			var container = document.getElementById(getQueueContainerId(qt));
+			if (container && queues[qt].length > 0) {
+				renderQueue(qt);
+			}
+		});
+	};
+
+	// ── Bootstrap ──────────────────────────────────────────────────────────
+
+	bindRemoveButtons();
+	bindFormSubmit();
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
+	} else {
+		window.XamxamInitFileUploads();
+	}
+})();