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

/**
 * file-upload-filepond.js
 *
 * Thin FilePond wrapper — replaces the old custom file-upload-queue.js.
 *
 * Architecture:
 *   1. Each <input type="file" class="tfe-file-picker"> is upgraded to a FilePond instance.
 *   2. FilePond handles drag-to-reorder, thumbnails, remove, validation — zero custom DOM.
 *   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).
 */

(function () {
	"use strict";

	// ── Per-queue-type configuration ────────────────────────────────────

	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,
		},
		video: {
			exts: ["mp4","webm","ogv","mov"],
			maxSize: function () { return 500 * 1024 * 1024; },
			multiple: true,
		},
		audio: {
			exts: ["mp3","ogg","oga","wav","flac","aac","m4a"],
			maxSize: function () { return 500 * 1024 * 1024; },
			multiple: true,
		},
		annexe: {
			exts: ["pdf","zip","tar","gz","tgz"],
			maxSize: function () { return 500 * 1024 * 1024; },
			multiple: true,
		},
		cover: {
			exts: ["jpg","jpeg","png","webp"],
			maxSize: function () { return 20 * 1024 * 1024; },
			multiple: false,
		},
		note_intention: {
			exts: ["pdf"],
			maxSize: function () { return 100 * 1024 * 1024; },
			multiple: false,
		},
	};

	// Map input id → queue type
	var INPUT_ID_TO_TYPE = {
		"tfe-files-input":    "tfe",
		"tfe-files-input-2":  "tfe",
		"video-files-input":  "video",
		"audio-files-input":  "audio",
		"annexe-files-input": "annexe",
		"couverture":         "cover",
		"note_intention":     "note_intention",
	};

	function ext(fn) {
		var m = fn.match(/\.([^./]+)$/);
		return m ? m[1].toLowerCase() : "";
	}

	// ── 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); });

		return {
			allowMultiple: cfg.multiple,
			allowReorder: true,
			storeAsFile: true,
			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"; },
			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."
					};
				}
				return true;
			},
		};
	}

	// ── Instance tracking ────────────────────────────────────────────────

	var _ponds = {};

	// ── Public API ────────────────────────────────────────────────────────

	/**
	 * Upgrade .tfe-file-picker inputs to FilePond instances.
	 * Called on page load and after HTMX swaps.
	 */
	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;

			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;

			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;
		});
	}

	/**
	 * Destroy FilePond instances inside a given container element.
	 * Used before HTMX swaps to avoid leaks.
	 */
	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;
			if (pond) {
				try { pond.destroy(); } catch (_) {}
				delete _ponds[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.
	 */
	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") {
			destroyFilePondsIn(target);
		}
	}

	// ── Bootstrap ─────────────────────────────────────────────────────────

	// Hook into HTMX events if htmx is loaded
	if (window.htmx) {
		window.htmx.on("htmx:beforeSwap", onHtmxBeforeSwap);
		window.htmx.on("htmx:afterSwap", function () {
			window.XamxamInitFilePonds();
		});
	}

	// Initialise on DOM ready
	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", function () {
			window.XamxamInitFilePonds();
		});
	} else {
		window.XamxamInitFilePonds();
	}

	// ── Mark form dirty on FilePond changes (beforeunload guard) ─────────
	document.addEventListener("FilePond:addfile", function () {
		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")) {
			window.__xamxamDirty = false;
		}
	});

})();