feat: FilePond production hardening — extension-based validation, server-side size limits (2GB), annexe validation, drop accept attributes, FilePond file styling

app/public/assets/js/file-upload-filepond.js

@@ -9,44 +9,87 @@
  *   3. storeAsFile: true preserves native multipart form submission.
  *      Server receives files via $_FILES indexed by each input's name attribute
  *      (e.g. queue_file[tfe][], queue_file[video][], etc.).
- *   4. Validation rules are derived from ALLOWED_BY_TYPE (same as before).
+ *   4. Type + size validation: via native FilePond options + FileValidateType/Size plugins.
+ *      beforeAddFile is used ONLY for hybrid validation (e.g. per-type size limits)
+ *      and returns true/false per the FilePond API contract.
+ *   5. Order serialization: hidden inputs track file order from pond.getFiles().
+ *   6. HTMX cleanup: generic destroyFilePondsIn(target) for all swaps, not just known IDs.
  */
 
 (function () {
 	"use strict";
 
 	// ── Per-queue-type configuration ────────────────────────────────────
+	// Single source of truth for validation. These specificatons are also
+	// reflected in the PHP-synthesised accept attributes on inputs.
 
 	var QUEUE_CONFIG = {
 		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; },
-			multiple: true,
+			acceptedFileTypes: [
+				"image/jpeg", "image/png", "image/gif", "image/webp",
+				"application/pdf",
+				"video/mp4", "video/webm", "video/ogg", "video/quicktime",
+				"audio/mpeg", "audio/ogg", "audio/flac", "audio/x-wav", "audio/aac", "audio/mp4",
+				"text/vtt",
+				"application/zip", "application/x-tar", "application/gzip"
+			],
+			labelFileTypeNotAllowed: "Format non accepté",
+			fileValidateTypeLabelExpectedTypes: "PDF, Images, Vidéos, Audio, VTT, Archives",
+			maxFileSize: "500MB",
+			labelMaxFileSizeExceeded: "Fichier trop volumineux",
+			labelMaxFileSize: "Taille max: {filesize}",
+			allowMultiple: true,
+			// Per-extension size limits: certain types get higher caps.
+			perExtensionMaxSize: {
+				pdf: "100MB",
+				mp4: "2GB", webm: "2GB", ogv: "2GB", mov: "2GB",
+				mp3: "2GB", ogg: "2GB", oga: "2GB", wav: "2GB", flac: "2GB", aac: "2GB", m4a: "2GB"
+			}
 		},
 		video: {
-			exts: ["mp4","webm","ogv","mov"],
-			maxSize: function () { return 500 * 1024 * 1024; },
-			multiple: true,
+			acceptedFileTypes: ["video/mp4", "video/webm", "video/ogg", "video/quicktime"],
+			labelFileTypeNotAllowed: "Format non accepté",
+			fileValidateTypeLabelExpectedTypes: "MP4, WebM, OGV, MOV",
+			maxFileSize: "500MB",
+			labelMaxFileSizeExceeded: "Fichier trop volumineux",
+			labelMaxFileSize: "Taille max: {filesize}",
+			allowMultiple: true
 		},
 		audio: {
-			exts: ["mp3","ogg","oga","wav","flac","aac","m4a"],
-			maxSize: function () { return 500 * 1024 * 1024; },
-			multiple: true,
+			acceptedFileTypes: ["audio/mpeg", "audio/ogg", "audio/flac", "audio/x-wav", "audio/aac", "audio/mp4"],
+			labelFileTypeNotAllowed: "Format non accepté",
+			fileValidateTypeLabelExpectedTypes: "MP3, OGG, FLAC, WAV, AAC, M4A",
+			maxFileSize: "500MB",
+			labelMaxFileSizeExceeded: "Fichier trop volumineux",
+			labelMaxFileSize: "Taille max: {filesize}",
+			allowMultiple: true
 		},
 		annexe: {
-			exts: ["pdf","zip","tar","gz","tgz"],
-			maxSize: function () { return 500 * 1024 * 1024; },
-			multiple: true,
+			acceptedFileTypes: ["application/pdf", "application/zip", "application/x-tar", "application/gzip"],
+			labelFileTypeNotAllowed: "Format non accepté",
+			fileValidateTypeLabelExpectedTypes: "PDF, ZIP, TAR, GZ",
+			maxFileSize: "500MB",
+			labelMaxFileSizeExceeded: "Fichier trop volumineux",
+			labelMaxFileSize: "Taille max: {filesize}",
+			allowMultiple: true
 		},
 		cover: {
-			exts: ["jpg","jpeg","png","webp"],
-			maxSize: function () { return 20 * 1024 * 1024; },
-			multiple: false,
+			acceptedFileTypes: ["image/jpeg", "image/png", "image/webp"],
+			labelFileTypeNotAllowed: "Seulement JPG, PNG ou WEBP",
+			fileValidateTypeLabelExpectedTypes: "JPG, PNG, WEBP",
+			maxFileSize: "20MB",
+			labelMaxFileSizeExceeded: "Fichier trop volumineux",
+			labelMaxFileSize: "Taille max: {filesize}",
+			allowMultiple: false
 		},
 		note_intention: {
-			exts: ["pdf"],
-			maxSize: function () { return 100 * 1024 * 1024; },
-			multiple: false,
+			acceptedFileTypes: ["application/pdf"],
+			labelFileTypeNotAllowed: "Seulement PDF",
+			fileValidateTypeLabelExpectedTypes: "PDF",
+			maxFileSize: "100MB",
+			labelMaxFileSizeExceeded: "Fichier trop volumineux",
+			labelMaxFileSize: "Taille max: {filesize}",
+			allowMultiple: false
 		},
 	};
 
@@ -61,51 +104,119 @@
 		"note_intention":     "note_intention",
 	};
 
-	function ext(fn) {
-		var m = fn.match(/\.([^./]+)$/);
+	// ── Helpers ───────────────────────────────────────────────────────────
+
+	/**
+	 * Parse a size string like "500MB" or "2GB" to bytes.
+	 */
+	function parseSize(str) {
+		var m = str.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB|TB)$/i);
+		if (!m) return 0;
+		var val = parseFloat(m[1]);
+		var unit = m[2].toUpperCase();
+		var mult = {B: 1, KB: 1024, MB: 1024*1024, GB: 1024*1024*1024, TB: 1024*1024*1024*1024};
+		return Math.round(val * (mult[unit] || 1));
+	}
+
+	/**
+	 * Get extension from filename (lowercase).
+	 */
+	function getExt(name) {
+		var m = name.match(/\.([^./]+)$/);
 		return m ? m[1].toLowerCase() : "";
 	}
 
+	// ── Order serialization ───────────────────────────────────────────────
+
+	/**
+	 * Create/update a hidden input that serializes the file order for a queue.
+	 * Name: queue_order[<queueType>]
+	 * Value: pipe-separated list of file names.
+	 */
+	function syncOrderInput(queueType, pond) {
+		var form = pond.element ? pond.element.closest("form") : null;
+		if (!form) return;
+
+		var orderInput = form.querySelector("input[name='queue_order[" + queueType + "]']");
+		var files = pond.getFiles();
+		if (files.length === 0) {
+			if (orderInput) orderInput.remove();
+			return;
+		}
+
+		var names = [];
+		for (var i = 0; i < files.length; i++) {
+			names.push(files[i].filename || files[i].file.name);
+		}
+
+		if (!orderInput) {
+			orderInput = document.createElement("input");
+			orderInput.type = "hidden";
+			orderInput.name = "queue_order[" + queueType + "]";
+			form.appendChild(orderInput);
+		}
+		orderInput.value = names.join("|");
+	}
+
 	// ── FilePond configuration per queue type ─────────────────────────────
 
 	function buildFilePondOptions(queueType, input) {
 		var cfg = QUEUE_CONFIG[queueType];
 		if (!cfg) return null;
 
-		var mimeMap = {
-			jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png",
-			gif: "image/gif", webp: "image/webp",
-			pdf: "application/pdf",
-			mp4: "video/mp4", webm: "video/webm", ogv: "video/ogg", mov: "video/quicktime",
-			mp3: "audio/mpeg", ogg: "audio/ogg", oga: "audio/ogg", wav: "audio/wav",
-			flac: "audio/flac", aac: "audio/aac", m4a: "audio/mp4",
-			vtt: "text/vtt",
-			zip: "application/zip", tar: "application/x-tar", gz: "application/gzip", tgz: "application/gzip",
-		};
-		var accepted = cfg.exts.map(function(e) { return mimeMap[e] || ("." + e); });
+		// Per-type max size overrides (for TFE: PDF=100MB, video/audio=2GB)
+		var perExtMax = cfg.perExtensionMaxSize || {};
 
 		return {
-			allowMultiple: cfg.multiple,
+			allowMultiple: cfg.allowMultiple,
 			allowReorder: true,
+			allowProcess: false,
 			storeAsFile: true,
+
+			// ── Native FilePond validation ──
+			acceptedFileTypes: cfg.acceptedFileTypes,
+			labelFileTypeNotAllowed: cfg.labelFileTypeNotAllowed,
+			fileValidateTypeLabelExpectedTypes: cfg.fileValidateTypeLabelExpectedTypes,
+			maxFileSize: cfg.maxFileSize,
+			labelMaxFileSizeExceeded: cfg.labelMaxFileSizeExceeded,
+			labelMaxFileSize: cfg.labelMaxFileSize,
+
+			// ── French labels ──
 			labelIdle: "Glissez-déposez vos fichiers ou <span class='filepond--label-action'>Parcourir</span>",
-			acceptedFileTypes: accepted,
-			labelFileTypeNotAllowed: "Type de fichier non accepté",
-			fileValidateTypeLabelExpectedTypes: "Types acceptés : " + cfg.exts.map(function(e) { return "." + e; }).join(", "),
-			maxFileSize: function () { return "500MB"; },
+			labelFileProcessing: "Chargement en cours",
+			labelFileProcessingComplete: "Chargement terminé",
+			labelFileProcessingAborted: "Chargement annulé",
+			labelFileProcessingError: "Erreur lors du chargement",
+			labelTapToCancel: "Appuyez pour annuler",
+			labelTapToRetry: "Appuyez pour réessayer",
+			labelTapToUndo: "Appuyez pour annuler",
+			labelButtonRemoveItem: "Supprimer",
+			labelButtonAbortItemLoad: "Annuler",
+			labelButtonRetryItemLoad: "Réessayer",
+			labelButtonProcessItem: "Charger",
+
+			// ── Per-extension size validation (hybrid: FilePond validates global maxFileSize,
+			//     beforeAddFile enforces per-extension limits via false return) ──
 			beforeAddFile: function (item) {
 				var f = item.file;
-				var max = cfg.maxSize(f);
-				if (f.size > max) {
-					var maxMb = Math.round(max / 1024 / 1024);
-					return {
-						status: "error",
-						main: "Fichier trop volumineux (" + (f.size / 1024 / 1024).toFixed(1) + " MB)",
-						sub: "Maximum : " + maxMb + " MB."
-					};
+				var ext = getExt(f.name);
+				if (ext && perExtMax[ext]) {
+					var limit = parseSize(perExtMax[ext]);
+					if (limit > 0 && f.size > limit) {
+						// Return false per FilePond API contract — the FileValidateSize
+						// plugin sets the error state via maxFileSize, but per-extension
+						// cap violations must be rejected here.
+						return false;
+					}
 				}
 				return true;
 			},
+
+			// ── Order serialization on add/remove/reorder ──
+			onaddfile: function () { syncOrderInput(queueType, this); },
+			onremovefile: function () { syncOrderInput(queueType, this); },
+			onreorderfiles: function () { syncOrderInput(queueType, this); },
+			onupdatefiles: function () { syncOrderInput(queueType, this); },
 		};
 	}
 
@@ -121,15 +232,12 @@
 	 */
 	window.XamxamInitFilePonds = function () {
 		document.querySelectorAll(".tfe-file-picker").forEach(function (input) {
-			// Skip already upgraded inputs
-			if (input.dataset.filepondUpgraded) return;
-			// Skip if input is inside an existing FilePond root
-			if (input.closest(".filepond--root")) return;
+			// Canonical duplicate check: FilePond.find() is the authoritative source
+			if (FilePond.find(input)) return;
 
 			var id = input.id;
 			var queueType = INPUT_ID_TO_TYPE[id];
 			if (!queueType) {
-				// Try data-queue-type on the input itself
 				queueType = input.dataset.queueType || null;
 			}
 			if (!queueType) return;
@@ -137,56 +245,77 @@
 			var options = buildFilePondOptions(queueType, input);
 			if (!options) return;
 
-			// Preserve the input's original name for form submission
 			options.name = input.getAttribute("name") || input.name || "";
 
 			var pond = FilePond.create(input, options);
-			input.dataset.filepondUpgraded = "1";
 
-			// Track by id for cleanup
 			var key = id || queueType;
 			_ponds[key] = pond;
+
+			// Initial order serialization (for existing files in edit mode — none expected)
+			syncOrderInput(queueType, pond);
 		});
-	}
+	};
 
 	/**
 	 * Destroy FilePond instances inside a given container element.
-	 * Used before HTMX swaps to avoid leaks.
+	 * Generic: handles ANY HTMX swap target, not just known IDs.
 	 */
 	function destroyFilePondsIn(el) {
 		if (!el) return;
-		// Find FilePond-upgraded inputs inside this element
-		el.querySelectorAll(".tfe-file-picker[data-filepond-upgraded]").forEach(function (input) {
-			// Destroy the FilePond instance if it exists
-			var id = input.id;
-			var pond = id ? _ponds[id] : null;
+		el.querySelectorAll(".tfe-file-picker").forEach(function (input) {
+			var pond = FilePond.find(input);
 			if (pond) {
-				try { pond.destroy(); } catch (_) {}
-				delete _ponds[id];
+				try {
+					// Remove order input before destroying
+					var form = input.closest("form");
+					if (form) {
+						var id = input.id;
+						var queueType = INPUT_ID_TO_TYPE[id] || input.dataset.queueType || null;
+						if (queueType) {
+							var orderInput = form.querySelector("input[name='queue_order[" + queueType + "]']");
+							if (orderInput) orderInput.remove();
+						}
+					}
+					pond.destroy();
+				} catch (_) {}
+			}
+			// Clean up tracking
+			if (input.id && _ponds[input.id]) {
+				delete _ponds[input.id];
 			}
-			delete input.dataset.filepondUpgraded;
 		});
 	}
 
 	// ── HTMX integration ─────────────────────────────────────────────────
 
 	/**
-	 * Before HTMX swaps a slot element that may contain FilePond instances,
-	 * destroy them to avoid leaks and file-state conflicts.
+	 * Generic beforeSwap handler: destroy FilePonds in ANY swapped target.
+	 * This prevents detached FilePond instances from leaking listeners.
 	 */
 	function onHtmxBeforeSwap(evt) {
 		var target = evt.detail.target;
-		if (!target) return;
-		var id = target.id || "";
-		// Only care about slot elements that may contain FilePond file inputs
-		if (id === "slot-video" || id === "slot-audio" || id === "annexes-input-block" || id === "format-extras-block") {
+		if (target) {
 			destroyFilePondsIn(target);
 		}
 	}
 
 	// ── Bootstrap ─────────────────────────────────────────────────────────
 
-	// Hook into HTMX events if htmx is loaded
+	// Register FilePond plugins (idempotent)
+	if (typeof FilePondPluginFileValidateType !== "undefined") {
+		FilePond.registerPlugin(FilePondPluginFileValidateType);
+	}
+	if (typeof FilePondPluginFileValidateSize !== "undefined") {
+		FilePond.registerPlugin(FilePondPluginFileValidateSize);
+	}
+	if (typeof FilePondPluginImagePreview !== "undefined") {
+		FilePond.registerPlugin(FilePondPluginImagePreview);
+	}
+	if (typeof FilePondPluginImageExifOrientation !== "undefined") {
+		FilePond.registerPlugin(FilePondPluginImageExifOrientation);
+	}
+
 	if (window.htmx) {
 		window.htmx.on("htmx:beforeSwap", onHtmxBeforeSwap);
 		window.htmx.on("htmx:afterSwap", function () {
@@ -194,7 +323,6 @@
 		});
 	}
 
-	// Initialise on DOM ready
 	if (document.readyState === "loading") {
 		document.addEventListener("DOMContentLoaded", function () {
 			window.XamxamInitFilePonds();
@@ -208,7 +336,6 @@
 		window.__xamxamDirty = true;
 	});
 
-	// Clean dirty flag on form submit (matches beforeunload-guard.js)
 	document.addEventListener("submit", function (e) {
 		var form = e.target;
 		if (form && form.hasAttribute && form.hasAttribute("data-beforeunload-guard")) {