fix: use getElementById for relink FilePond pool lookup

FilePond 4.x wraps the original input element in its own DOM structure
which can break CSS attribute selectors. querySelector with
.tfe-file-picker[data-queue-type='...'] returned null even though the
element existed and was initialized.

Switched to getElementById with a queueType→inputId map:
  cover → couverture
  note_intention → note_intention
  tfe → tfe-files-input
  annexe → annexe-files-input

getElementById is both faster and immune to FilePond's DOM wrapping.
This commit is contained in:
Pontoporeia
2026-07-10 16:42:56 +02:00
parent 6da45435f5
commit d8f85b03ad
2 changed files with 18 additions and 28 deletions
@@ -892,18 +892,21 @@
}
console.log(`[relink] success | new_id=${data.id}`);
// Add the new file to the FilePond pool, then close the modal.
// If the DOM was replaced (e.g. live-reload), refresh the
// form fragment via HTMX so the server re-renders the pools
// with the newly-linked file included.
var input = document.querySelector(
`.tfe-file-picker[data-queue-type="${queueType}"]`,
);
// Look up the FilePond pool by the known input ID for this queue type.
// querySelector on data-queue-type is unreliable after FilePond
// wraps the original input element.
var inputIdMap = {
cover: "couverture",
note_intention: "note_intention",
tfe: "tfe-files-input",
annexe: "annexe-files-input",
};
var inputId = inputIdMap[queueType] || null;
var input = inputId ? document.getElementById(inputId) : null;
console.log(
"[relink] looking for input | selector=" +
`.tfe-file-picker[data-queue-type="${queueType}"]` +
" | found=" +
!!input,
"[relink] looking for input | queueType=" + queueType +
" | inputId=" + inputId +
" | found=" + !!input,
);
var closeModal = () => {
var modal = document.getElementById("relink-modal");
@@ -1013,8 +1016,9 @@
}
console.log(`[pt-relink] success | new_id=${data.id}`);
var input = document.querySelector(
'.tfe-file-picker[data-queue-type="tfe"]',
var input = document.getElementById("tfe-files-input");
console.log(
"[pt-relink] looking for input | inputId=tfe-files-input | found=" + !!input,
);
var closeModal = () => {
var modal = document.getElementById("peertube-relink-modal");