mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
Replace custom file-upload-queue.js with FilePond
- Delete file-upload-queue.js (495 lines of custom queue logic) - Delete sortable.min.js dependency - Add file-upload-filepond.js: thin wrapper that upgrades .tfe-file-picker inputs to FilePond instances with storeAsFile:true for native multipart form submission (no form-submit interception needed) - Update fichiers-fragment.php: replace queue container <ul> elements and empty-state <p> with bare <input> elements that FilePond upgrades; change name attributes to queue_file[tfe][] etc. for PHP compatibility - Update add.php, edit.php, partage/index.php: swap JS/CSS refs - Clean up form.css: remove .fq-* and .tfe-file-queue custom styles, add FilePond theme overrides matching xamxam design tokens - Update dead-code fieldset-files.php for consistency Server-side stays unchanged: PHP receives ['queue_file']['tfe'][] exactly as before through native multipart submission.
This commit is contained in:
Pontoporeia
221
app/public/assets/js/file-upload-filepond.js
Normal file
221
app/public/assets/js/file-upload-filepond.js
Normal file
@@ -0,0 +1,221 @@
|
||||
/**
|
||||
* 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";
|
||||
|
||||
// ── Constants (mirrors file-upload-queue.js ALLOWED_BY_TYPE) ──────────
|
||||
|
||||
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; },
|
||||
},
|
||||
};
|
||||
|
||||
// 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",
|
||||
};
|
||||
|
||||
function ext(fn) {
|
||||
var m = fn.match(/\.([^./]+)$/);
|
||||
return m ? m[1].toLowerCase() : "";
|
||||
}
|
||||
|
||||
// ── FilePond configuration per queue type ─────────────────────────────
|
||||
|
||||
function buildFilePondOptions(queueType, input) {
|
||||
var rules = ALLOWED_BY_TYPE[queueType];
|
||||
if (!rules) return null;
|
||||
|
||||
// Build acceptedFileTypes from extensions
|
||||
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 = rules.exts.map(function(e) { return mimeMap[e] || ("." + e); });
|
||||
|
||||
return {
|
||||
allowMultiple: (queueType !== "video" && queueType !== "audio"),
|
||||
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 : " + rules.exts.map(function(e) { return "." + e; }).join(", "),
|
||||
fileValidateSizeLabelMaxFileSize: function (fileSize) {
|
||||
var max = rules.maxSize({name: "", size: 0});
|
||||
return "Taille maximale : " + Math.round(max / 1024 / 1024) + " MB";
|
||||
},
|
||||
maxFileSize: function () {
|
||||
// We can't do per-file max based on extension easily with FilePond.
|
||||
// Use the larger limit and validate PDFs as a special case in the
|
||||
// beforeAddFile callback.
|
||||
return "500MB";
|
||||
},
|
||||
beforeAddFile: function (item) {
|
||||
var f = item.file;
|
||||
var max = rules.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.
|
||||
*/
|
||||
function initFilePonds() {
|
||||
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 to infer from data attr on the container
|
||||
var container = input.closest("[data-queue-type]");
|
||||
if (container) queueType = container.dataset.queueType;
|
||||
}
|
||||
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 all FilePond instances and restore original inputs.
|
||||
* Called before HTMX swaps that replace the file block.
|
||||
*/
|
||||
function destroyFilePonds() {
|
||||
Object.keys(_ponds).forEach(function (key) {
|
||||
try {
|
||||
_ponds[key].destroy();
|
||||
} catch (_) { /* ignore */ }
|
||||
delete _ponds[key];
|
||||
});
|
||||
// Also catch any stray instances (HTMX may have replaced DOM)
|
||||
document.querySelectorAll(".tfe-file-picker[data-filepond-upgraded]").forEach(function (input) {
|
||||
delete input.dataset.filepondUpgraded;
|
||||
});
|
||||
}
|
||||
|
||||
// ── HTMX integration ─────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Called before HTMX replaces the #format-fichiers-block.
|
||||
* We must destroy FilePond instances on the soon-to-be-removed DOM nodes
|
||||
* to avoid leaks and file-state conflicts.
|
||||
*/
|
||||
function onHtmxBeforeSwap(evt) {
|
||||
// Only care about format-fichiers-block swaps
|
||||
if (evt.detail.target && (
|
||||
evt.detail.target.id === "format-fichiers-block" ||
|
||||
evt.detail.target.closest && evt.detail.target.closest("#format-fichiers-block")
|
||||
)) {
|
||||
destroyFilePonds();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Bootstrap ─────────────────────────────────────────────────────────
|
||||
|
||||
// Hook into HTMX events if htmx is loaded
|
||||
if (window.htmx) {
|
||||
window.htmx.on("htmx:beforeSwap", onHtmxBeforeSwap);
|
||||
}
|
||||
|
||||
// Initialise on DOM ready
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initFilePonds();
|
||||
// Re-init handles HTMX after-swap
|
||||
if (window.htmx) {
|
||||
window.htmx.on("htmx:afterSwap", function () {
|
||||
initFilePonds();
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
initFilePonds();
|
||||
if (window.htmx) {
|
||||
window.htmx.on("htmx:afterSwap", function () {
|
||||
initFilePonds();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ── 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;
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user