mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
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`
This commit is contained in:
Pontoporeia
@@ -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">⋮</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 + '">✕</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();
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user