refactor: session-based incremental TFE upload via HTMX, drop SortableJS

Replace the client-side FileArray + Sortable drag-to-reorder with a
server-side session-based upload flow:

- New endpoints: /partage/upload-tfe-file, /partage/remove-tfe-file
  (and /admin/ variants) — single-file incremental upload via HTMX
  multipart/form-data with progress bar support
- Session storage: uploaded files go to STORAGE_ROOT/uploads/{session_id}/
  with metadata in $_SESSION['tfe_uploads']
- file-upload-queue.js reduced to single-file previews only (couverture,
  note_intention, annexes thumbnails)
- ThesisFileHandler gains handleTfeFilesFromSession + writeTfeFileFromSrc
  + cleanupSessionUploads for final commit from session temp
- Sortable.min.js removed from all script tags; drag handles and ghost
  CSS removed
- No file_orders[]/file_labels[] hidden field injection needed
- Upload queue survives page refresh (server-owned list)

This eliminates the SortableJS dependency entirely while keeping the
same UX: pick files, see them in a queue, remove individual files.
This commit is contained in:
Pontoporeia
2026-05-10 16:19:46 +02:00
parent e06a317499
commit ca7707cd47
20 changed files with 606 additions and 255 deletions

View File

@@ -1,11 +1,11 @@
/**
* file-upload-queue.js
*
* Renders visual file queues for:
* 1. #tfe-files-input — multi-file upload with drag-to-reorder (SortableJS)
* and per-file label inputs. Injects hidden file_labels[] / file_orders[].
* 2. input[data-preview] — single-file previews (couverture, note_intention, etc.)
* 3. #existing-files-sortable — edit-mode sortable list
* Provides single-file previews for file inputs with the data-preview attribute
* (couverture, note_intention, annexes, etc.).
*
* The multi-file TFE queue is rendered server-side via HTMX fragments
* (upload-tfe-file.php / remove-tfe-file.php).
*
* Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
* after swap without a global event listener.
@@ -52,127 +52,7 @@ window.XamxamInitFileUploads = function () {
});
}
// ── 1. TFE multi-file queue ────────────────────────────────────────────
var picker = document.getElementById("tfe-files-input");
var queue = document.getElementById("tfe-file-queue");
var empty = document.getElementById("tfe-file-queue-empty");
var sortHint = document.getElementById("tfe-file-queue-sort-hint");
if (picker && queue) {
console.log(
"[file-upload-queue] init TFE queue picker=",
picker,
"multiple=",
picker.multiple,
);
var fileArray = [];
if (typeof Sortable !== "undefined") {
Sortable.create(queue, {
animation: 150,
handle: ".fq-drag-handle",
ghostClass: "fq-ghost",
onEnd: function () {
var items = queue.querySelectorAll(".fq-item");
var newArr = Array.prototype.map.call(items, function (li) {
return fileArray[parseInt(li.getAttribute("data-idx"), 10)];
});
fileArray = newArr;
renderQueue();
},
});
}
picker.onchange = function () {
console.log(
"[file-upload-queue] onchange fired, files count:",
picker.files.length,
"names:",
Array.from(picker.files).map(function (f) {
return f.name;
}),
);
fileArray = fileArray.concat(Array.from(picker.files));
console.log(
"[file-upload-queue] fileArray after concat, length:",
fileArray.length,
);
picker.value = "";
renderQueue();
};
function renderQueue() {
queue.innerHTML = "";
if (!fileArray.length) {
empty.style.display = "";
if (sortHint) sortHint.style.display = "none";
injectHiddenFields([]);
return;
}
empty.style.display = "none";
if (sortHint) sortHint.style.display = "";
fileArray.forEach(function (file, idx) {
var li = document.createElement("li");
li.className = "fq-item";
li.setAttribute("data-idx", idx);
li.innerHTML =
'<span class="fq-drag-handle" title="R\u00e9ordonner">\u2820</span>' +
'<span class="fq-icon">' +
iconFor(file) +
"</span>" +
'<span class="fq-info"><span class="fq-name">' +
esc(file.name) +
"</span>" +
'<span class="fq-size">' +
humanSize(file.size) +
"</span></span>" +
'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' +
esc(file.name) +
'">&#x2715;</button>';
li.querySelector(".fq-remove").onclick = (function (i) {
return function () {
fileArray.splice(i, 1);
renderQueue();
};
})(idx);
queue.appendChild(li);
});
injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
}
function injectHiddenFields(items) {
var form = picker.closest("form");
if (!form) return;
form
.querySelectorAll(".fq-hidden-label, .fq-hidden-order")
.forEach(function (el) {
el.remove();
});
items.forEach(function (li, sortedIdx) {
var label = li.querySelector(".fq-label");
var lInp = document.createElement("input");
lInp.type = "hidden";
lInp.name = "file_labels[]";
lInp.value = label ? label.value : "";
lInp.className = "fq-hidden-label";
form.appendChild(lInp);
var oInp = document.createElement("input");
oInp.type = "hidden";
oInp.name = "file_orders[]";
oInp.value = sortedIdx + 1;
oInp.className = "fq-hidden-order";
form.appendChild(oInp);
});
}
// On submit, refresh hidden fields from current queue state
var form = picker.closest("form");
if (form)
form.addEventListener("submit", function () {
injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
});
}
// ── 2. Single-file previews (data-preview attribute) ────────────────────
// ── Single-file previews (data-preview attribute) ────────────────────
document
.querySelectorAll('input[type="file"][data-preview]')
.forEach(function (input) {
@@ -221,32 +101,6 @@ window.XamxamInitFileUploads = function () {
});
};
});
// ── 3. Existing-files sortable (edit mode) ──────────────────────────────
var sortList = document.getElementById("existing-files-sortable");
if (sortList && typeof Sortable !== "undefined") {
Sortable.create(sortList, {
animation: 150,
handle: ".admin-file-drag-handle",
ghostClass: "fq-ghost",
onEnd: function () {
sortList
.querySelectorAll('input[name="file_sort_order[]"]')
.forEach(function (el) {
el.remove();
});
sortList
.querySelectorAll(".admin-file-list-item[data-file-id]")
.forEach(function (li) {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "file_sort_order[]";
inp.value = li.getAttribute("data-file-id");
li.prepend(inp);
});
},
});
}
};
// Bootstrap on page load