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
2026-05-10 20:10:15 +02:00
parent 223a15b397
commit 1aff5ff46d
12 changed files with 299 additions and 659 deletions

View File

@@ -33,24 +33,18 @@ $adminMode = $adminMode ?? false;
include APP_ROOT . '/templates/partials/form/file-field.php';
?>
<!-- TFE files — multi-file, with per-file labels -->
<!-- TFE files — multi-file, FilePond-powered -->
<div class="admin-form-group admin-files-fieldgroup">
<label>TFE (obligatoire) :</label>
<div class="admin-file-input">
<input type="file" id="tfe-files-input"
name="files[]" multiple
name="queue_file[tfe][]" multiple
accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.mov,.ogv,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt"
class="tfe-file-picker">
<small class="admin-file-hint">
Types acceptés : PDF · JPG/PNG/GIF/WEBP · MP4/WebM/MOV (vidéo) · MP3/OGG/WAV/FLAC (audio) · ZIP/TAR (archives). Max 500 MB par fichier.
Les fichiers <code>.vtt</code> sont des sous-titres et seront associés automatiquement à la vidéo précédente.
</small>
<!-- File queue — populated by JS -->
<ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés">
<!-- File queue rendered client-side by file-upload-queue.js -->
</ul>
<p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
</div>
</div>