mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 08:09:18 +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
6
TODO.md
6
TODO.md
@@ -1,7 +1,3 @@
|
|||||||
# TODO
|
# TODO
|
||||||
|
|
||||||
- [x] Fix cross-field validation contamination — wrap file-field.php in <form> to scope hx-include
|
- [x] Replace HTMX+PHP file upload queues with client-side JS
|
||||||
- [x] Add inline MIME/size validation to upload-tfe-file.php
|
|
||||||
- [x] Add inline validation wrappers to PeerTube video/audio and direct video/audio inputs
|
|
||||||
- [x] Fix validator fallback: if field_name key missing in $_FILES, try first available file
|
|
||||||
- [x] Fix file-field.php admin_mode using $adminMode variable instead of undefined ADMIN_MODE constant
|
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ function wasSelected($key, $value) {
|
|||||||
$isAdmin = true;
|
$isAdmin = true;
|
||||||
$bodyClass = 'admin-body';
|
$bodyClass = 'admin-body';
|
||||||
$extraCss = ['/assets/css/form.css'];
|
$extraCss = ['/assets/css/form.css'];
|
||||||
$extraJs = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
|
$extraJs = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
|
||||||
require_once APP_ROOT . '/templates/head.php';
|
require_once APP_ROOT . '/templates/head.php';
|
||||||
include APP_ROOT . '/templates/header.php';
|
include APP_ROOT . '/templates/header.php';
|
||||||
include APP_ROOT . '/templates/admin/add.php';
|
include APP_ROOT . '/templates/admin/add.php';
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ try {
|
|||||||
|
|
||||||
$isAdmin = true; $bodyClass = 'admin-body';
|
$isAdmin = true; $bodyClass = 'admin-body';
|
||||||
$extraCss = ['/assets/css/form.css'];
|
$extraCss = ['/assets/css/form.css'];
|
||||||
$extraJs = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
|
$extraJs = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
|
||||||
require_once APP_ROOT . '/templates/head.php';
|
require_once APP_ROOT . '/templates/head.php';
|
||||||
include APP_ROOT . '/templates/header.php';
|
include APP_ROOT . '/templates/header.php';
|
||||||
include APP_ROOT . '/templates/admin/edit.php';
|
include APP_ROOT . '/templates/admin/edit.php';
|
||||||
|
|||||||
@@ -1,12 +0,0 @@
|
|||||||
<?php
|
|
||||||
/**
|
|
||||||
* remove-tfe-file.php (admin)
|
|
||||||
*
|
|
||||||
* Admin-gated wrapper for the remove-tfe-file fragment.
|
|
||||||
*/
|
|
||||||
require_once __DIR__ . '/../../bootstrap.php';
|
|
||||||
require_once __DIR__ . '/../../src/AdminAuth.php';
|
|
||||||
App::boot();
|
|
||||||
AdminAuth::requireLogin();
|
|
||||||
|
|
||||||
require_once __DIR__ . '/../partage/remove-tfe-file.php';
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<?php
|
|
||||||
/**
|
|
||||||
* upload-tfe-file.php (admin)
|
|
||||||
*
|
|
||||||
* Admin-gated wrapper for the upload-tfe-file fragment.
|
|
||||||
*/
|
|
||||||
require_once __DIR__ . '/../../bootstrap.php';
|
|
||||||
require_once __DIR__ . '/../../src/AdminAuth.php';
|
|
||||||
App::boot();
|
|
||||||
AdminAuth::requireLogin();
|
|
||||||
|
|
||||||
require_once __DIR__ . '/../partage/upload-tfe-file.php';
|
|
||||||
@@ -641,6 +641,25 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fq-drag-handle {
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: grab;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0 var(--space-3xs);
|
||||||
|
user-select: none;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fq-drag-handle:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fq-container {
|
||||||
|
/* wrapper div emitted by renderQueueFragment */
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Existing-files list (edit form) ─────────────────────────────────────── */
|
/* ── Existing-files list (edit form) ─────────────────────────────────────── */
|
||||||
|
|
||||||
.admin-file-list {
|
.admin-file-list {
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
* Beforeunload guard — prompts the user before navigating away from unsaved changes.
|
* Beforeunload guard — prompts the user before navigating away from unsaved changes.
|
||||||
*
|
*
|
||||||
* Attach to any form with a data-beforeunload-guard attribute.
|
* Attach to any form with a data-beforeunload-guard attribute.
|
||||||
|
* Also watches window.__xamxamDirty (set by file-upload-queue.js).
|
||||||
* No effect when JavaScript is unavailable (form posts normally).
|
* No effect when JavaScript is unavailable (form posts normally).
|
||||||
*/
|
*/
|
||||||
(() => {
|
(() => {
|
||||||
@@ -13,11 +14,11 @@
|
|||||||
for (const form of forms) {
|
for (const form of forms) {
|
||||||
form.addEventListener('input', () => { dirty = true; });
|
form.addEventListener('input', () => { dirty = true; });
|
||||||
form.addEventListener('change', () => { dirty = true; });
|
form.addEventListener('change', () => { dirty = true; });
|
||||||
form.addEventListener('submit', () => { dirty = false; });
|
form.addEventListener('submit', () => { dirty = false; window.__xamxamDirty = false; });
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('beforeunload', (e) => {
|
window.addEventListener('beforeunload', (e) => {
|
||||||
if (dirty) {
|
if (dirty || window.__xamxamDirty) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,17 +1,31 @@
|
|||||||
/**
|
/**
|
||||||
* file-upload-queue.js
|
* file-upload-queue.js
|
||||||
*
|
*
|
||||||
* Provides single-file previews for file inputs with the data-preview attribute
|
* Client-side file upload queues for TFE, Video, Audio, and Annexe files.
|
||||||
* (couverture, note_intention, annexes, etc.).
|
* Replaces the old HTMX+PHP session-backed queue system.
|
||||||
*
|
*
|
||||||
* The multi-file TFE queue is rendered server-side via HTMX fragments
|
* Queues:
|
||||||
* (upload-tfe-file.php / remove-tfe-file.php).
|
* 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
|
* Architecture:
|
||||||
* after swap without a global event listener.
|
* 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 = {
|
var ICON = {
|
||||||
pdf: "\uD83D\uDCC4",
|
pdf: "\uD83D\uDCC4",
|
||||||
video: "\uD83C\uDFAC",
|
video: "\uD83C\uDFAC",
|
||||||
@@ -22,15 +36,46 @@ window.XamxamInitFileUploads = function () {
|
|||||||
other: "\uD83D\uDCCE",
|
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) {
|
function iconFor(file) {
|
||||||
var t = file.type || "",
|
var t = (file.type || "").toLowerCase(),
|
||||||
n = file.name.toLowerCase();
|
n = (file.name || "").toLowerCase();
|
||||||
if (/^image\//.test(t)) return ICON.image;
|
if (/^image\//.test(t)) return ICON.image;
|
||||||
if (t === "application/pdf" || /\.pdf$/.test(n)) return ICON.pdf;
|
if (t === "application/pdf" || /\.pdf$/.test(n)) return ICON.pdf;
|
||||||
if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n))
|
if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICON.video;
|
||||||
return ICON.video;
|
if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICON.audio;
|
||||||
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 (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
|
||||||
if (/\.vtt$/.test(n)) return ICON.vtt;
|
if (/\.vtt$/.test(n)) return ICON.vtt;
|
||||||
return ICON.other;
|
return ICON.other;
|
||||||
@@ -52,58 +97,356 @@ window.XamxamInitFileUploads = function () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Single-file previews (data-preview attribute) ────────────────────
|
function ext(fn) {
|
||||||
document
|
var m = fn.match(/\.([^./]+)$/);
|
||||||
.querySelectorAll('input[type="file"][data-preview]')
|
return m ? m[1].toLowerCase() : "";
|
||||||
.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);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Bootstrap on page load
|
function genFileId() {
|
||||||
if (document.readyState === "loading")
|
return "fq_" + Math.random().toString(36).slice(2, 10) + "_" + Date.now().toString(36);
|
||||||
document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
|
}
|
||||||
else window.XamxamInitFileUploads();
|
|
||||||
|
// ── 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();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|||||||
@@ -6,18 +6,19 @@
|
|||||||
* Called on every format checkbox change so the Fichiers fieldset adapts.
|
* Called on every format checkbox change so the Fichiers fieldset adapts.
|
||||||
*
|
*
|
||||||
* Fixed inputs (always present in #format-fichiers-block):
|
* Fixed inputs (always present in #format-fichiers-block):
|
||||||
* 1. Image de couverture (optional)
|
* 1. Image de couverture (optional) — single file, plain input
|
||||||
* 2. Note d'intention (PDF, required unless adminMode)
|
* 2. Note d'intention (PDF, required) — single file, plain input
|
||||||
* 3. TFE — multi-file upload (required unless adminMode)
|
* 3. TFE — multi-file JS queue — client-side, orderable
|
||||||
* 4. Annexes checkbox + file input
|
* 4. Annexes checkbox + JS queue — client-side, orderable
|
||||||
*
|
*
|
||||||
* Format-specific extra inputs (separate #format-extras-block so toggling
|
* Format-specific extra inputs (#format-extras-block):
|
||||||
* formats does not destroy file queue state):
|
|
||||||
* - Site web → URL field only
|
* - Site web → URL field only
|
||||||
* - Vidéo → PeerTube upload or direct file input
|
* - Vidéo → PeerTube single upload OR multi-file JS queue
|
||||||
* - Audio → PeerTube upload or direct file input
|
* - Audio → PeerTube single upload OR multi-file JS queue
|
||||||
* - (all others: Écriture, Performance, Objet éditorial, Installation, Autre)
|
*
|
||||||
* → no extra input needed beyond the standard TFE file upload
|
* File queues are managed entirely client-side by file-upload-queue.js.
|
||||||
|
* This fragment only provides the empty container elements and the file
|
||||||
|
* picker inputs.
|
||||||
*
|
*
|
||||||
* Expected POST:
|
* Expected POST:
|
||||||
* formats[] — array of selected format_type IDs
|
* formats[] — array of selected format_type IDs
|
||||||
@@ -59,7 +60,6 @@ $hasVideo = $videoId && in_array($videoId, $selectedFormats, true);
|
|||||||
$hasAudio = $audioId && in_array($audioId, $selectedFormats, true);
|
$hasAudio = $audioId && in_array($audioId, $selectedFormats, true);
|
||||||
$hasImage = $imageId && in_array($imageId, $selectedFormats, true);
|
$hasImage = $imageId && in_array($imageId, $selectedFormats, true);
|
||||||
|
|
||||||
// Show standard file inputs unless *only* Site web is selected
|
|
||||||
$hasNonWebFormat = !empty(array_filter(
|
$hasNonWebFormat = !empty(array_filter(
|
||||||
$selectedFormats,
|
$selectedFormats,
|
||||||
fn($id) => $id !== $siteWebId
|
fn($id) => $id !== $siteWebId
|
||||||
@@ -89,8 +89,8 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
|
|||||||
<fieldset class="admin-checkbox-group"
|
<fieldset class="admin-checkbox-group"
|
||||||
<?= !$adminMode ? 'required aria-required="true"' : '' ?>
|
<?= !$adminMode ? 'required aria-required="true"' : '' ?>
|
||||||
hx-post="<?= htmlspecialchars($hxPost) ?>"
|
hx-post="<?= htmlspecialchars($hxPost) ?>"
|
||||||
hx-target="#format-extras-block"
|
hx-target="#format-fichiers-block"
|
||||||
hx-select="#format-extras-block"
|
hx-select="#format-fichiers-block"
|
||||||
hx-trigger="change"
|
hx-trigger="change"
|
||||||
hx-include="this, [name='website_url'], [name='admin_mode'], [name='edit_mode'], [name='_cover'], [name='has_annexes']"
|
hx-include="this, [name='website_url'], [name='admin_mode'], [name='edit_mode'], [name='_cover'], [name='has_annexes']"
|
||||||
hx-swap="outerHTML">
|
hx-swap="outerHTML">
|
||||||
@@ -116,28 +116,92 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
|
|||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Fichiers</legend>
|
<legend>Fichiers</legend>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Existing files + cover preview (edit mode only, initial render — not re-sent on HTMX swaps)
|
||||||
|
$_efiles = $currentFiles ?? [];
|
||||||
|
$_cover = $_POST['_cover'] ?? null;
|
||||||
|
if ($editMode && (!empty($_efiles) || $_cover)):
|
||||||
|
?>
|
||||||
|
<div class="admin-form-group">
|
||||||
|
<ul id="existing-files-sortable" class="admin-file-list">
|
||||||
|
<?php
|
||||||
|
// ── Couverture preview ──
|
||||||
|
if ($_cover): ?>
|
||||||
|
<li class="admin-file-list-item">
|
||||||
|
<span class="admin-file-icon-col">🖼️</span>
|
||||||
|
<span class="admin-file-info">
|
||||||
|
<span class="admin-file-name">Couverture</span>
|
||||||
|
<span class="admin-file-meta-row">
|
||||||
|
<img src="/media?path=<?= urlencode($_cover) ?>"
|
||||||
|
alt="Couverture actuelle" style="max-height:120px;border-radius:var(--radius);margin-top:var(--space-3xs);">
|
||||||
|
</span>
|
||||||
|
<label class="admin-checkbox-label" style="margin-top:var(--space-3xs);">
|
||||||
|
<input type="checkbox" name="remove_cover" value="1"> Supprimer
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php
|
||||||
|
// ── Existing files ──
|
||||||
|
$_thesisFilesList = array_values(array_filter($_efiles, fn($f) => $f["file_type"] !== "cover"));
|
||||||
|
foreach ($_thesisFilesList as $_f):
|
||||||
|
$_fExt = strtolower(pathinfo($_f["file_path"] ?? "", PATHINFO_EXTENSION));
|
||||||
|
$_fType = $_f["file_type"] ?? "other";
|
||||||
|
$_fIcon = match (true) {
|
||||||
|
$_fType === "main" || $_fExt === "pdf" => "📄",
|
||||||
|
in_array($_fExt, ["jpg","jpeg","png","gif","webp"]) => "🖼️",
|
||||||
|
$_fType === "video" || in_array($_fExt, ["mp4","webm","mov","ogv"]) => "🎬",
|
||||||
|
$_fType === "audio" || in_array($_fExt, ["mp3","ogg","wav","flac","aac","m4a"]) => "🔊",
|
||||||
|
$_fType === "caption" || $_fExt === "vtt" => "💬",
|
||||||
|
$_fType === "website" => "🌐",
|
||||||
|
default => "📎",
|
||||||
|
};
|
||||||
|
$_fIsExternal = str_starts_with($_f["file_path"] ?? "", "http://") || str_starts_with($_f["file_path"] ?? "", "https://");
|
||||||
|
$_fLinkHref = $_fIsExternal ? htmlspecialchars($_f["file_path"]) : "/media?path=" . urlencode($_f["file_path"]);
|
||||||
|
?>
|
||||||
|
<li class="admin-file-list-item" data-file-id="<?= (int)$_f["id"] ?>">
|
||||||
|
<input type="hidden" name="file_sort_order[]" value="<?= (int)$_f["id"] ?>">
|
||||||
|
<span class="admin-file-icon-col"><?= $_fIcon ?></span>
|
||||||
|
<span class="admin-file-info">
|
||||||
|
<a href="<?= $_fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
|
||||||
|
<?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>
|
||||||
|
</a>
|
||||||
|
<span class="admin-file-meta-row">
|
||||||
|
<span class="admin-file-type-badge"><?= htmlspecialchars($_fType) ?></span>
|
||||||
|
<?php if (!empty($_f["file_size"]) && $_f["file_size"] > 0): ?>
|
||||||
|
<span class="admin-file-size"><?= number_format($_f["file_size"] / 1024 / 1024, 2) ?> MB</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</span>
|
||||||
|
<input type="text" name="file_label[<?= (int)$_f["id"] ?>]"
|
||||||
|
value="<?= htmlspecialchars($_f["display_label"] ?? "") ?>"
|
||||||
|
placeholder="Légende / description (optionnel)"
|
||||||
|
class="admin-file-label-input">
|
||||||
|
</span>
|
||||||
|
<input type="hidden" name="delete_files[]" value="<?= (int)$_f["id"] ?>" disabled>
|
||||||
|
<button type="button"
|
||||||
|
class="admin-btn-remove fq-remove"
|
||||||
|
onclick="this.previousElementSibling.disabled=false;this.closest('li').style.opacity='0.4';this.disabled=true;"
|
||||||
|
aria-label="Supprimer <?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>">✕</button>
|
||||||
|
</li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- ── 1. Couverture (always) ── -->
|
<!-- ── 1. Couverture (always) ── -->
|
||||||
<div>
|
<div>
|
||||||
<?php
|
<?php
|
||||||
$_cover = $_POST['_cover'] ?? null;
|
$_cover = $_POST['_cover'] ?? null;
|
||||||
if ($editMode && $_cover): ?>
|
// Only show upload field in add mode or when no existing cover
|
||||||
<div class="admin-banner-preview">
|
if (!$editMode || !$_cover):
|
||||||
<img src="/media?path=<?= urlencode($_cover) ?>"
|
$name = 'couverture';
|
||||||
alt="Couverture actuelle" style="max-height:180px;">
|
$label = 'Image de couverture (optionnel)';
|
||||||
<label class="admin-checkbox-label">
|
$accept = 'image/jpeg,image/png,image/webp';
|
||||||
<input type="checkbox" name="remove_cover" value="1"> Supprimer la couverture
|
$hint = 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
|
||||||
</label>
|
$required = false;
|
||||||
</div>
|
$id = 'couverture';
|
||||||
<?php endif;
|
include APP_ROOT . '/templates/partials/form/file-field.php';
|
||||||
$name = 'couverture';
|
endif;
|
||||||
$label = 'Image de couverture (optionnel) :';
|
|
||||||
$accept = 'image/jpeg,image/png,image/webp';
|
|
||||||
$hint = ($editMode && $_cover)
|
|
||||||
? 'Laisser vide pour conserver la couverture actuelle. JPG, PNG ou WEBP. Max 20 MB.'
|
|
||||||
: 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
|
|
||||||
$required = false;
|
|
||||||
$id = 'couverture';
|
|
||||||
include APP_ROOT . '/templates/partials/form/file-field.php';
|
|
||||||
unset($_cover);
|
unset($_cover);
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
@@ -146,9 +210,9 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
|
|||||||
<div>
|
<div>
|
||||||
<?php
|
<?php
|
||||||
$name = 'note_intention';
|
$name = 'note_intention';
|
||||||
$label = 'Note d\'intention :';
|
$label = 'Note d\'intention';
|
||||||
$accept = '.pdf';
|
$accept = '.pdf';
|
||||||
$hint = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
|
$hint = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
|
||||||
$hintRaw = true;
|
$hintRaw = true;
|
||||||
$required = !$adminMode;
|
$required = !$adminMode;
|
||||||
$id = 'note_intention';
|
$id = 'note_intention';
|
||||||
@@ -156,55 +220,29 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
|
|||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── 3. TFE (always) ── -->
|
<!-- ── 3. TFE — multi-file client-side JS queue (always) ── -->
|
||||||
<div class="admin-form-group admin-files-fieldgroup">
|
<div class="admin-form-group admin-files-fieldgroup">
|
||||||
<label>TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
|
<label for="tfe-files-input">TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||||
<div class="admin-file-input">
|
<div class="admin-file-input">
|
||||||
<?php
|
<input type="file" id="tfe-files-input"
|
||||||
$tfeUploadUrl = $adminMode ? '/admin/upload-tfe-file.php' : '/partage/upload-tfe-file';
|
name="tfe"
|
||||||
$tfeRemoveUrl = $adminMode ? '/admin/remove-tfe-file.php' : '/partage/remove-tfe-file';
|
accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
|
||||||
$tfeValidateUrl = $adminMode ? '/admin/validate-file-fragment.php' : '/partage/validate-file-fragment';
|
class="tfe-file-picker"
|
||||||
?>
|
<?= !$adminMode ? 'required' : '' ?>>
|
||||||
<!-- Inline validation form (scoped) -->
|
|
||||||
<form class="file-validation-form"
|
|
||||||
hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
|
|
||||||
hx-encoding="multipart/form-data"
|
|
||||||
hx-trigger="change from:#tfe-files-input"
|
|
||||||
hx-target="find .file-validation-msg"
|
|
||||||
hx-swap="innerHTML"
|
|
||||||
hx-sync="replace">
|
|
||||||
<input type="hidden" name="field_name" value="tfe">
|
|
||||||
<input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
|
|
||||||
<input type="file" id="tfe-files-input"
|
|
||||||
name="tfe"
|
|
||||||
accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
|
|
||||||
class="tfe-file-picker"
|
|
||||||
hx-encoding="multipart/form-data"
|
|
||||||
hx-post="<?= htmlspecialchars($tfeUploadUrl) ?>"
|
|
||||||
hx-target="#tfe-file-queue-container"
|
|
||||||
hx-select="#tfe-file-queue-container"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
hx-trigger="change"
|
|
||||||
hx-include="[name='csrf_token'], [name='admin_mode']">
|
|
||||||
<div class="file-validation-msg" aria-live="polite"></div>
|
|
||||||
</form>
|
|
||||||
<progress id="tfe-upload-progress" value="0" max="100" style="display:none;width:100%;margin-top:var(--space-3xs);"></progress>
|
<progress id="tfe-upload-progress" value="0" max="100" style="display:none;width:100%;margin-top:var(--space-3xs);"></progress>
|
||||||
<small class="admin-file-hint">
|
<small class="admin-file-hint">
|
||||||
PDF (max 100 MB) · Images (JPG/PNG/GIF/WEBP).
|
PDF (max 100 MB) · Images (JPG/PNG/GIF/WEBP). Glissez pour réordonner.
|
||||||
PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
|
PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
|
||||||
</small>
|
</small>
|
||||||
<div id="tfe-file-queue-container">
|
<!-- Queue container — populated by file-upload-queue.js -->
|
||||||
<?php
|
<div id="tfe-file-queue-container" class="fq-container" data-queue-type="tfe">
|
||||||
// Render initial queue state from session
|
<ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
|
||||||
$initialUploads = $_SESSION['tfe_uploads'] ?? [];
|
<p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
|
||||||
require_once APP_ROOT . '/public/partage/tfe-queue-helper.php';
|
|
||||||
renderQueueFragment($initialUploads, $tfeRemoveUrl);
|
|
||||||
?>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── Annexes ── -->
|
<!-- ── 4. Annexes — multi-file client-side JS queue ── -->
|
||||||
<div id="annexes-input-block">
|
<div id="annexes-input-block">
|
||||||
<div class="admin-form-group">
|
<div class="admin-form-group">
|
||||||
<label class="admin-checkbox-label">
|
<label class="admin-checkbox-label">
|
||||||
@@ -220,25 +258,31 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<?php if ($hasAnnexesChecked): ?>
|
<?php if ($hasAnnexesChecked): ?>
|
||||||
<div>
|
<div class="admin-form-group admin-files-fieldgroup">
|
||||||
<?php
|
<label for="annexe-files-input">Annexes<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||||
$name = 'annexes';
|
<div class="admin-file-input">
|
||||||
$label = 'Annexes :';
|
<input type="file" id="annexe-files-input"
|
||||||
$accept = '.pdf,.zip,.tar,.gz';
|
name="annexe" multiple
|
||||||
$hint = 'PDF ou archives ZIP/TAR. Max 500 MB.';
|
accept=".pdf,.zip,.tar,.gz"
|
||||||
$required = !$adminMode;
|
class="tfe-file-picker"
|
||||||
$multiple = true;
|
<?= !$adminMode ? 'required' : '' ?>>
|
||||||
include APP_ROOT . '/templates/partials/form/file-field.php';
|
<small class="admin-file-hint">PDF ou archives ZIP/TAR. Max 500 MB. Glissez pour réordonner.</small>
|
||||||
?>
|
<!-- Queue container — populated by file-upload-queue.js -->
|
||||||
|
<div id="annexe-file-queue-container" class="fq-container" data-queue-type="annexe">
|
||||||
|
<ul id="annexe-file-queue" class="tfe-file-queue" aria-label="Annexes sélectionnées"></ul>
|
||||||
|
<p id="annexe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script>if(window.XamxamInitQueues)window.XamxamInitQueues();</script>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── Format-specific extras (swappable, inside Fichiers fieldset) ── -->
|
<!-- ── Format-specific extras (swappable) ── -->
|
||||||
<div id="format-extras-block" style="display:flex;flex-direction:column;gap:var(--space-s);">
|
<div id="format-extras-block" style="display:flex;flex-direction:column;gap:var(--space-s);">
|
||||||
<?php if ($hasSiteWeb): ?>
|
<?php if ($hasSiteWeb): ?>
|
||||||
<div class="admin-form-group">
|
<div class="admin-form-group">
|
||||||
<label for="website_url">URL du site<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
|
<label for="website_url">URL du site<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||||
<div class="admin-file-input">
|
<div class="admin-file-input">
|
||||||
<input type="url" id="website_url" name="website_url"
|
<input type="url" id="website_url" name="website_url"
|
||||||
value="<?= $websiteUrl ?>"
|
value="<?= $websiteUrl ?>"
|
||||||
@@ -252,43 +296,29 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
|
|||||||
<?php if ($hasVideo): ?>
|
<?php if ($hasVideo): ?>
|
||||||
<?php if ($peerTubeEnabled): ?>
|
<?php if ($peerTubeEnabled): ?>
|
||||||
<div class="admin-form-group">
|
<div class="admin-form-group">
|
||||||
<label for="peertube_video">Fichier vidéo (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
|
<label for="peertube_video">Vidéo PeerTube<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||||
<div class="admin-file-input"
|
<div class="admin-file-input">
|
||||||
hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
|
|
||||||
hx-encoding="multipart/form-data"
|
|
||||||
hx-trigger="change from:#peertube_video"
|
|
||||||
hx-target="find .file-validation-msg"
|
|
||||||
hx-swap="innerHTML"
|
|
||||||
hx-sync="replace"
|
|
||||||
hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_video">
|
|
||||||
<input type="hidden" name="field_name" value="tfe">
|
|
||||||
<input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
|
|
||||||
<input type="file" id="peertube_video" name="peertube_video"
|
<input type="file" id="peertube_video" name="peertube_video"
|
||||||
accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
|
accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
|
||||||
<?= !$adminMode ? 'required' : '' ?>>
|
<?= !$adminMode ? 'required' : '' ?>>
|
||||||
<div class="file-validation-msg" aria-live="polite"></div>
|
<small>MP4, WebM ou MOV. La vidéo sera hébergée sur PeerTube. Max 500 MB.</small>
|
||||||
<small>MP4, WebM ou MOV. La vidéo sera hébergée sur PeerTube et intégrée
|
|
||||||
comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<div class="admin-form-group">
|
<div class="admin-form-group admin-files-fieldgroup">
|
||||||
<label for="tfe-video-upload">Fichier vidéo<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
|
<label for="video-files-input">Vidéo<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||||
<div class="admin-file-input"
|
<div class="admin-file-input">
|
||||||
hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
|
<input type="file" id="video-files-input"
|
||||||
hx-encoding="multipart/form-data"
|
name="video"
|
||||||
hx-trigger="change from:#tfe-video-upload"
|
|
||||||
hx-target="find .file-validation-msg"
|
|
||||||
hx-swap="innerHTML"
|
|
||||||
hx-sync="replace"
|
|
||||||
hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-video-upload">
|
|
||||||
<input type="hidden" name="field_name" value="tfe">
|
|
||||||
<input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
|
|
||||||
<input type="file" id="tfe-video-upload" name="files[]"
|
|
||||||
accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
|
accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
|
||||||
|
class="tfe-file-picker"
|
||||||
<?= !$adminMode ? 'required' : '' ?>>
|
<?= !$adminMode ? 'required' : '' ?>>
|
||||||
<div class="file-validation-msg" aria-live="polite"></div>
|
<small class="admin-file-hint">MP4, WebM ou MOV. Max 500 MB par fichier. Glissez pour réordonner.</small>
|
||||||
<small>MP4, WebM ou MOV. Max 500 MB.</small>
|
<!-- Queue container — populated by file-upload-queue.js -->
|
||||||
|
<div id="video-file-queue-container" class="fq-container" data-queue-type="video">
|
||||||
|
<ul id="video-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
|
||||||
|
<p id="video-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
@@ -297,66 +327,40 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
|
|||||||
<?php if ($hasAudio): ?>
|
<?php if ($hasAudio): ?>
|
||||||
<?php if ($peerTubeEnabled): ?>
|
<?php if ($peerTubeEnabled): ?>
|
||||||
<div class="admin-form-group">
|
<div class="admin-form-group">
|
||||||
<label for="peertube_audio">Fichier audio (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
|
<label for="peertube_audio">Audio PeerTube<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||||
<div class="admin-file-input"
|
<div class="admin-file-input">
|
||||||
hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
|
|
||||||
hx-encoding="multipart/form-data"
|
|
||||||
hx-trigger="change from:#peertube_audio"
|
|
||||||
hx-target="find .file-validation-msg"
|
|
||||||
hx-swap="innerHTML"
|
|
||||||
hx-sync="replace"
|
|
||||||
hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_audio">
|
|
||||||
<input type="hidden" name="field_name" value="tfe">
|
|
||||||
<input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
|
|
||||||
<input type="file" id="peertube_audio" name="peertube_audio"
|
<input type="file" id="peertube_audio" name="peertube_audio"
|
||||||
accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
|
accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
|
||||||
<?= !$adminMode ? 'required' : '' ?>>
|
<?= !$adminMode ? 'required' : '' ?>>
|
||||||
<div class="file-validation-msg" aria-live="polite"></div>
|
<small>MP3, OGG, WAV, FLAC ou AAC. Le fichier sera hébergé sur PeerTube. Max 500 MB.</small>
|
||||||
<small>MP3, OGG, WAV, FLAC ou AAC. Le fichier sera hébergé sur PeerTube et intégré
|
|
||||||
comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<div class="admin-form-group">
|
<div class="admin-form-group admin-files-fieldgroup">
|
||||||
<label for="tfe-audio-upload">Fichier audio<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
|
<label for="audio-files-input">Audio<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||||
<div class="admin-file-input"
|
<div class="admin-file-input">
|
||||||
hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
|
<input type="file" id="audio-files-input"
|
||||||
hx-encoding="multipart/form-data"
|
name="audio"
|
||||||
hx-trigger="change from:#tfe-audio-upload"
|
|
||||||
hx-target="find .file-validation-msg"
|
|
||||||
hx-swap="innerHTML"
|
|
||||||
hx-sync="replace"
|
|
||||||
hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-audio-upload">
|
|
||||||
<input type="hidden" name="field_name" value="tfe">
|
|
||||||
<input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
|
|
||||||
<input type="file" id="tfe-audio-upload" name="files[]"
|
|
||||||
accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
|
accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
|
||||||
|
class="tfe-file-picker"
|
||||||
<?= !$adminMode ? 'required' : '' ?>>
|
<?= !$adminMode ? 'required' : '' ?>>
|
||||||
<div class="file-validation-msg" aria-live="polite"></div>
|
<small class="admin-file-hint">MP3, OGG, WAV, FLAC ou AAC. Max 500 MB par fichier. Glissez pour réordonner.</small>
|
||||||
<small>MP3, OGG, WAV, FLAC ou AAC. Max 500 MB.</small>
|
<!-- Queue container — populated by file-upload-queue.js -->
|
||||||
|
<div id="audio-file-queue-container" class="fq-container" data-queue-type="audio">
|
||||||
|
<ul id="audio-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
|
||||||
|
<p id="audio-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<script>if(window.XamxamInitQueues)window.XamxamInitQueues();</script>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</fieldset><!-- /Fichiers -->
|
</fieldset><!-- /Fichiers -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
if(window.XamxamInitFileUploads)window.XamxamInitFileUploads();
|
if(window.XamxamInitFileUploads)window.XamxamInitFileUploads();
|
||||||
// TFE upload progress bar
|
|
||||||
(function(){
|
|
||||||
var input = document.getElementById('tfe-files-input');
|
|
||||||
var prog = document.getElementById('tfe-upload-progress');
|
|
||||||
if (!input || !prog) return;
|
|
||||||
input.addEventListener('htmx:xhr:progress', function(evt) {
|
|
||||||
prog.style.display = '';
|
|
||||||
prog.setAttribute('value', evt.detail.loaded / evt.detail.total * 100);
|
|
||||||
});
|
|
||||||
input.addEventListener('htmx:afterRequest', function() {
|
|
||||||
prog.style.display = 'none';
|
|
||||||
prog.setAttribute('value', 0);
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
</script>
|
||||||
</div><!-- #format-fichiers-block -->
|
</div><!-- #format-fichiers-block -->
|
||||||
|
|||||||
@@ -43,21 +43,7 @@ if ($slug === 'validate-file-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST')
|
|||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Special route: /partage/upload-tfe-file (HTMX fragment — upload single TFE file)
|
|
||||||
if ($slug === 'upload-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
||||||
App::boot();
|
|
||||||
App::verifyCsrf();
|
|
||||||
require_once __DIR__ . '/upload-tfe-file.php';
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Special route: /partage/remove-tfe-file (HTMX fragment — remove single TFE file)
|
|
||||||
if ($slug === 'remove-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
||||||
App::boot();
|
|
||||||
App::verifyCsrf();
|
|
||||||
require_once __DIR__ . '/remove-tfe-file.php';
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Special route: /partage/fichiers-fragment (HTMX fragment — format-aware fichiers block)
|
// Special route: /partage/fichiers-fragment (HTMX fragment — format-aware fichiers block)
|
||||||
if ($slug === 'fichiers-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST') {
|
if ($slug === 'fichiers-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
@@ -387,6 +373,7 @@ function renderShareLinkForm(string $slug, array $link): void
|
|||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff">
|
||||||
<link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
|
<link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
|
||||||
<link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
|
<link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
|
||||||
|
<script src="<?= App::assetV('/assets/js/sortable.min.js') ?>" defer></script>
|
||||||
<script src="<?= App::assetV('/assets/js/file-upload-queue.js') ?>" defer></script>
|
<script src="<?= App::assetV('/assets/js/file-upload-queue.js') ?>" defer></script>
|
||||||
<script src="<?= App::assetV('/assets/js/beforeunload-guard.js') ?>" defer></script>
|
<script src="<?= App::assetV('/assets/js/beforeunload-guard.js') ?>" defer></script>
|
||||||
<script src="<?= App::assetV('/assets/js/htmx.min.js') ?>" defer></script>
|
<script src="<?= App::assetV('/assets/js/htmx.min.js') ?>" defer></script>
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
<?php
|
|
||||||
/**
|
|
||||||
* remove-tfe-file.php (partage)
|
|
||||||
*
|
|
||||||
* HTMX fragment: removes a file from the TFE upload queue (session + temp
|
|
||||||
* directory) and returns the updated queue HTML fragment.
|
|
||||||
*
|
|
||||||
* Expected POST:
|
|
||||||
* index — the numeric index of the file to remove
|
|
||||||
*/
|
|
||||||
|
|
||||||
require_once __DIR__ . '/../../bootstrap.php';
|
|
||||||
App::boot();
|
|
||||||
App::verifyCsrf();
|
|
||||||
|
|
||||||
$index = isset($_POST['index']) ? (int)$_POST['index'] : -1;
|
|
||||||
$uploads = $_SESSION['tfe_uploads'] ?? [];
|
|
||||||
|
|
||||||
if ($index < 0 || $index >= count($uploads)) {
|
|
||||||
http_response_code(400);
|
|
||||||
echo '<p class="tfe-queue-empty">Index invalide.</p>';
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Delete temp file ───────────────────────────────────────────────────────
|
|
||||||
$entry = $uploads[$index];
|
|
||||||
$absPath = STORAGE_ROOT . '/' . $entry['tmp_path'];
|
|
||||||
if (file_exists($absPath)) {
|
|
||||||
unlink($absPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Remove from session ────────────────────────────────────────────────────
|
|
||||||
array_splice($_SESSION['tfe_uploads'], $index, 1);
|
|
||||||
|
|
||||||
// ── Clean up empty temp directory ──────────────────────────────────────────
|
|
||||||
$sessionId = session_id();
|
|
||||||
$tempDir = STORAGE_ROOT . '/uploads/' . $sessionId;
|
|
||||||
$_SESSION['tfe_uploads'] = array_values($_SESSION['tfe_uploads']);
|
|
||||||
|
|
||||||
if (empty($_SESSION['tfe_uploads']) && is_dir($tempDir)) {
|
|
||||||
// Remove dir only if empty (rmdir fails if not empty, which is fine)
|
|
||||||
@rmdir($tempDir);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Render updated queue ───────────────────────────────────────────────────
|
|
||||||
require_once __DIR__ . '/tfe-queue-helper.php';
|
|
||||||
renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
<?php
|
|
||||||
/**
|
|
||||||
* Shared fragment helper for rendering the TFE file upload queue.
|
|
||||||
*
|
|
||||||
* Used by both upload-tfe-file.php and remove-tfe-file.php.
|
|
||||||
*
|
|
||||||
* @param array $uploads Array of ['tmp_path', 'orig_name', 'size', 'mime']
|
|
||||||
* @param string $removeUrl URL endpoint for removing files (e.g. '/partage/remove-tfe-file')
|
|
||||||
*/
|
|
||||||
|
|
||||||
function renderQueueFragment(array $uploads, string $removeUrl = '/partage/remove-tfe-file'): void
|
|
||||||
{
|
|
||||||
$ICON = [
|
|
||||||
'pdf' => "\u{1F4C4}",
|
|
||||||
'video' => "\u{1F3AC}",
|
|
||||||
'audio' => "\u{1F50A}",
|
|
||||||
'zip' => "\u{1F5DC}\u{FE0F}",
|
|
||||||
'vtt' => "\u{1F4AC}",
|
|
||||||
'image' => "\u{1F5BC}\u{FE0F}",
|
|
||||||
'other' => "\u{1F4CE}",
|
|
||||||
];
|
|
||||||
|
|
||||||
$iconFor = function (string $name, string $mime) use ($ICON): string {
|
|
||||||
if (str_starts_with($mime, 'image/')) return $ICON['image'];
|
|
||||||
if ($mime === 'application/pdf' || str_ends_with(strtolower($name), '.pdf')) return $ICON['pdf'];
|
|
||||||
if (str_starts_with($mime, 'video/') || preg_match('/\.(mp4|webm|mov|ogv)$/i', $name)) return $ICON['video'];
|
|
||||||
if (str_starts_with($mime, 'audio/') || preg_match('/\.(mp3|ogg|oga|wav|flac|aac|m4a)$/i', $name)) return $ICON['audio'];
|
|
||||||
if (preg_match('/\.(zip|tar|gz|tgz)$/i', $name)) return $ICON['zip'];
|
|
||||||
if (preg_match('/\.vtt$/i', $name)) return $ICON['vtt'];
|
|
||||||
return $ICON['other'];
|
|
||||||
};
|
|
||||||
|
|
||||||
$humanSize = function (int $b): string {
|
|
||||||
return $b >= 1073741824
|
|
||||||
? number_format($b / 1073741824, 2) . ' GB'
|
|
||||||
: ($b >= 1048576
|
|
||||||
? number_format($b / 1048576, 2) . ' MB'
|
|
||||||
: ($b >= 1024
|
|
||||||
? number_format($b / 1024, 1) . ' KB'
|
|
||||||
: $b . ' B'));
|
|
||||||
};
|
|
||||||
|
|
||||||
if (empty($uploads)) {
|
|
||||||
echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
|
|
||||||
. ' aria-label="Fichiers sélectionnés"></ul>'
|
|
||||||
. "\n"
|
|
||||||
. '<p id="tfe-file-queue-empty" class="tfe-queue-empty">'
|
|
||||||
. 'Aucun fichier sélectionné.</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
|
|
||||||
. ' aria-label="Fichiers sélectionnés">';
|
|
||||||
foreach ($uploads as $idx => $f) {
|
|
||||||
$icon = $iconFor($f['orig_name'], $f['mime']);
|
|
||||||
$name = htmlspecialchars($f['orig_name']);
|
|
||||||
$size = $humanSize($f['size']);
|
|
||||||
echo '<li class="fq-item">'
|
|
||||||
. '<span class="fq-icon">' . $icon . '</span>'
|
|
||||||
. '<span class="fq-info">'
|
|
||||||
. '<span class="fq-name">' . $name . '</span>'
|
|
||||||
. '<span class="fq-size">' . $size . '</span>'
|
|
||||||
. '</span>'
|
|
||||||
. '<button type="button" class="admin-btn-remove fq-remove"'
|
|
||||||
. ' aria-label="Retirer ' . $name . '"'
|
|
||||||
. ' hx-post="' . htmlspecialchars($removeUrl) . '"'
|
|
||||||
. ' hx-target="#tfe-file-queue-container"'
|
|
||||||
. ' hx-select="#tfe-file-queue-container"'
|
|
||||||
. ' hx-swap="outerHTML"'
|
|
||||||
. ' hx-vals=\'{"index":' . $idx . '}\''
|
|
||||||
. ' hx-include="[name=\'csrf_token\']"'
|
|
||||||
. '>✕</button>'
|
|
||||||
. '</li>';
|
|
||||||
}
|
|
||||||
echo '</ul>';
|
|
||||||
echo '<p id="tfe-file-queue-empty" class="tfe-queue-empty" style="display:none">'
|
|
||||||
. 'Aucun fichier sélectionné.</p>';
|
|
||||||
}
|
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
<?php
|
|
||||||
/**
|
|
||||||
* upload-tfe-file.php (partage)
|
|
||||||
*
|
|
||||||
* HTMX fragment: receives a single file upload, stores it in a session-scoped
|
|
||||||
* temp directory, appends it to the TFE upload queue, and returns the updated
|
|
||||||
* queue HTML fragment.
|
|
||||||
*
|
|
||||||
* Expected POST:
|
|
||||||
* file — the uploaded file (single file, not array)
|
|
||||||
*
|
|
||||||
* Session structure:
|
|
||||||
* $_SESSION['tfe_uploads'] = [
|
|
||||||
* ['tmp_path' => '...', 'orig_name' => '...', 'size' => ..., 'mime' => '...'],
|
|
||||||
* ...
|
|
||||||
* ]
|
|
||||||
*/
|
|
||||||
|
|
||||||
require_once __DIR__ . '/../../bootstrap.php';
|
|
||||||
App::boot();
|
|
||||||
App::verifyCsrf();
|
|
||||||
|
|
||||||
// ── Validate upload ────────────────────────────────────────────────────────
|
|
||||||
$upload = $_FILES['tfe'] ?? null;
|
|
||||||
if (!$upload || !isset($upload['error']) || $upload['error'] !== UPLOAD_ERR_OK) {
|
|
||||||
http_response_code(400);
|
|
||||||
echo '<p class="tfe-queue-empty">Erreur lors du téléchargement.</p>';
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── MIME + size validation ─────────────────────────────────────────────────
|
|
||||||
$adminMode = ($_POST['admin_mode'] ?? '0') === '1';
|
|
||||||
$finfo = new \finfo(FILEINFO_MIME_TYPE);
|
|
||||||
$mimeType = $finfo->file($upload['tmp_name']);
|
|
||||||
$ext = strtolower(pathinfo($upload['name'], PATHINFO_EXTENSION));
|
|
||||||
|
|
||||||
if ($mimeType === 'text/plain' && $ext === 'vtt') {
|
|
||||||
$mimeType = 'text/vtt';
|
|
||||||
}
|
|
||||||
|
|
||||||
$allowedMimes = [
|
|
||||||
'application/pdf',
|
|
||||||
'image/jpeg', 'image/png', 'image/gif', 'image/webp',
|
|
||||||
'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
|
|
||||||
'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
|
|
||||||
'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
|
|
||||||
'text/vtt',
|
|
||||||
'application/zip', 'application/x-zip-compressed',
|
|
||||||
'application/x-tar', 'application/gzip',
|
|
||||||
'application/octet-stream',
|
|
||||||
];
|
|
||||||
$allowedExts = [
|
|
||||||
'jpg', 'jpeg', 'png', 'gif', 'webp', 'pdf',
|
|
||||||
'mp4', 'webm', 'ogv', 'mov',
|
|
||||||
'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
|
|
||||||
'vtt', 'zip', 'tar', 'gz', 'tgz',
|
|
||||||
];
|
|
||||||
|
|
||||||
$mimeOk = in_array($mimeType, $allowedMimes, true)
|
|
||||||
|| ($mimeType === 'application/octet-stream' && in_array($ext, $allowedExts, true))
|
|
||||||
|| in_array($ext, $allowedExts, true);
|
|
||||||
|
|
||||||
if (!$mimeOk && !$adminMode) {
|
|
||||||
http_response_code(400);
|
|
||||||
echo '<p class="tfe-queue-empty">Type de fichier non accepté : ' . htmlspecialchars($upload['name']) . '</p>';
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
$maxSize = ($mimeType === 'application/pdf' || $ext === 'pdf') ? 100 * 1024 * 1024 : 500 * 1024 * 1024;
|
|
||||||
if ($upload['size'] > $maxSize && !$adminMode) {
|
|
||||||
$maxMb = round($maxSize / 1024 / 1024);
|
|
||||||
http_response_code(400);
|
|
||||||
echo '<p class="tfe-queue-empty">Fichier trop volumineux (' . round($upload['size'] / 1024 / 1024, 1) . ' MB). Maximum : ' . $maxMb . ' MB.</p>';
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Session temp directory ─────────────────────────────────────────────────
|
|
||||||
$sessionId = session_id();
|
|
||||||
$tempDir = STORAGE_ROOT . '/uploads/' . $sessionId;
|
|
||||||
if (!is_dir($tempDir)) {
|
|
||||||
mkdir($tempDir, 0755, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Move uploaded file to temp ─────────────────────────────────────────────
|
|
||||||
$origName = basename($upload['name']);
|
|
||||||
$ext = strtolower(pathinfo($origName, PATHINFO_EXTENSION));
|
|
||||||
|
|
||||||
// Generate a unique temp name to avoid collisions
|
|
||||||
$uniqueId = bin2hex(random_bytes(8));
|
|
||||||
$tmpName = 'tmp_' . $uniqueId . ($ext ? '.' . $ext : '');
|
|
||||||
$tmpPath = $tempDir . '/' . $tmpName;
|
|
||||||
|
|
||||||
if (!move_uploaded_file($upload['tmp_name'], $tmpPath)) {
|
|
||||||
http_response_code(500);
|
|
||||||
echo '<p class="tfe-queue-empty">Erreur lors de la sauvegarde du fichier.</p>';
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
chmod($tmpPath, 0644);
|
|
||||||
|
|
||||||
// Determine MIME type
|
|
||||||
$finfo = new \finfo(FILEINFO_MIME_TYPE);
|
|
||||||
$mimeType = $finfo->file($tmpPath);
|
|
||||||
|
|
||||||
// ── Store in session ───────────────────────────────────────────────────────
|
|
||||||
if (!isset($_SESSION['tfe_uploads']) || !is_array($_SESSION['tfe_uploads'])) {
|
|
||||||
$_SESSION['tfe_uploads'] = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
$_SESSION['tfe_uploads'][] = [
|
|
||||||
'tmp_path' => 'uploads/' . $sessionId . '/' . $tmpName,
|
|
||||||
'orig_name' => $origName,
|
|
||||||
'size' => $upload['size'],
|
|
||||||
'mime' => $mimeType,
|
|
||||||
];
|
|
||||||
|
|
||||||
// ── Render updated queue ───────────────────────────────────────────────────
|
|
||||||
require_once __DIR__ . '/tfe-queue-helper.php';
|
|
||||||
renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');
|
|
||||||
@@ -197,14 +197,17 @@ class ThesisCreateController
|
|||||||
$this->handleCoverUpload($thesisId, $files['couverture'] ?? null, $folderPath, $filePrefix);
|
$this->handleCoverUpload($thesisId, $files['couverture'] ?? null, $folderPath, $filePrefix);
|
||||||
$this->handleNoteIntentionUpload($thesisId, $files['note_intention'] ?? null, $folderPath, $filePrefix);
|
$this->handleNoteIntentionUpload($thesisId, $files['note_intention'] ?? null, $folderPath, $filePrefix);
|
||||||
|
|
||||||
// TFE files come from session temp (incremental upload via HTMX)
|
// TFE files from client-side JS queue (FormData)
|
||||||
$sessionUploads = $_SESSION['tfe_uploads'] ?? [];
|
$queueFiles = $files['queue_file'] ?? [];
|
||||||
$nextNum = $this->handleTfeFilesFromSession($thesisId, $sessionUploads, $folderPath, $filePrefix, 1);
|
$qTfe = $this->extractFilesSubArray($queueFiles, 'tfe');
|
||||||
// Clear session uploads after successful commit
|
$qVideo = $this->extractFilesSubArray($queueFiles, 'video');
|
||||||
$this->cleanupSessionUploads();
|
$qAudio = $this->extractFilesSubArray($queueFiles, 'audio');
|
||||||
|
$qAnnexe = $this->extractFilesSubArray($queueFiles, 'annexe');
|
||||||
|
|
||||||
$this->handleAnnexeFiles($thesisId, $files['annexes'] ?? null, $folderPath, $filePrefix, $post);
|
$nextNum = $this->handleTfeQueueFiles($thesisId, $qTfe, $folderPath, $filePrefix, 1);
|
||||||
// PeerTube file rows don't go on disk, but the uploads themselves are processed separately
|
$nextNum = $this->handleTfeQueueFiles($thesisId, $qVideo, $folderPath, $filePrefix, $nextNum);
|
||||||
|
$nextNum = $this->handleTfeQueueFiles($thesisId, $qAudio, $folderPath, $filePrefix, $nextNum);
|
||||||
|
$this->handleAnnexeQueueFiles($thesisId, $qAnnexe, $folderPath, $filePrefix);
|
||||||
|
|
||||||
// ── 5b. PeerTube video / audio uploads ────────────────────────────────
|
// ── 5b. PeerTube video / audio uploads ────────────────────────────────
|
||||||
$this->handlePeerTubeUpload($thesisId, $data['titre'], $files, 'peertube_video');
|
$this->handlePeerTubeUpload($thesisId, $data['titre'], $files, 'peertube_video');
|
||||||
@@ -518,10 +521,14 @@ class ThesisCreateController
|
|||||||
$exemplaireErg = !empty($post['exemplaire_erg']);
|
$exemplaireErg = !empty($post['exemplaire_erg']);
|
||||||
$cc2r = !empty($post['cc2r']);
|
$cc2r = !empty($post['cc2r']);
|
||||||
|
|
||||||
// Annexes validation: if has_annexes is checked, at least one annexe file must be provided
|
// Annexes validation: if has_annexes is checked, queue_file[annexe] must have at least one file
|
||||||
$hasAnnexes = !empty($post['has_annexes']);
|
$hasAnnexes = !empty($post['has_annexes']);
|
||||||
if (!$adminMode && $hasAnnexes && empty($_FILES['annexes']['name'][0])) {
|
if (!$adminMode && $hasAnnexes) {
|
||||||
throw new Exception('Veuillez fournir au moins un fichier d\'annexe.');
|
$queueAnnexes = $this->extractFilesSubArray($files['queue_file'] ?? [], 'annexe');
|
||||||
|
$hasAnnexeFiles = is_array($queueAnnexes['name'] ?? null) && count(array_filter($queueAnnexes['name'])) > 0;
|
||||||
|
if (!$hasAnnexeFiles) {
|
||||||
|
throw new Exception('Veuillez fournir au moins un fichier d\'annexe.');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return compact(
|
return compact(
|
||||||
|
|||||||
@@ -411,22 +411,28 @@ class ThesisEditController
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── New TFE files upload (from session via HTMX incremental upload) ──
|
// ── New TFE/video/audio files upload (from client-side JS queue) ──
|
||||||
$sessionUploads = $_SESSION['tfe_uploads'] ?? [];
|
$queueFiles = $files['queue_file'] ?? [];
|
||||||
if (!empty($sessionUploads)) {
|
$qTfe = $this->extractFilesSubArray($queueFiles, 'tfe');
|
||||||
// Count existing TFE files to determine starting number
|
$qVideo = $this->extractFilesSubArray($queueFiles, 'video');
|
||||||
$tfeCount = 0;
|
$qAudio = $this->extractFilesSubArray($queueFiles, 'audio');
|
||||||
foreach ($existingFiles as $f) {
|
$qAnnexe = $this->extractFilesSubArray($queueFiles, 'annexe');
|
||||||
if (!in_array($f['file_type'] ?? '', ['cover', 'note_intention', 'website', 'annex', 'caption'], true)
|
|
||||||
&& !str_starts_with($f['file_path'] ?? '', 'http')) {
|
$tfeCount = 0;
|
||||||
$tfeCount++;
|
foreach ($existingFiles as $f) {
|
||||||
}
|
if (!in_array($f['file_type'] ?? '', ['cover', 'note_intention', 'website', 'annex', 'caption'], true)
|
||||||
|
&& !str_starts_with($f['file_path'] ?? '', 'http')) {
|
||||||
|
$tfeCount++;
|
||||||
}
|
}
|
||||||
$this->handleTfeFilesFromSession($thesisId, $sessionUploads, $folderPath, $filePrefix, $tfeCount + 1);
|
|
||||||
$this->cleanupSessionUploads();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── New annexe files upload ────────────────────────────────────────────
|
$startNum = $tfeCount + 1;
|
||||||
|
$startNum = $this->handleTfeQueueFiles($thesisId, $qTfe, $folderPath, $filePrefix, $startNum);
|
||||||
|
$startNum = $this->handleTfeQueueFiles($thesisId, $qVideo, $folderPath, $filePrefix, $startNum);
|
||||||
|
$this->handleTfeQueueFiles($thesisId, $qAudio, $folderPath, $filePrefix, $startNum);
|
||||||
|
$this->handleAnnexeQueueFiles($thesisId, $qAnnexe, $folderPath, $filePrefix);
|
||||||
|
|
||||||
|
// Legacy annexe files (direct upload, non-queue path — kept for backwards compat)
|
||||||
if (isset($files['annexes']) && is_array($files['annexes']['name'] ?? null)) {
|
if (isset($files['annexes']) && is_array($files['annexes']['name'] ?? null)) {
|
||||||
$this->handleAnnexeFiles($thesisId, $files['annexes'], $folderPath, $filePrefix, $post);
|
$this->handleAnnexeFiles($thesisId, $files['annexes'], $folderPath, $filePrefix, $post);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -304,20 +304,40 @@ trait ThesisFileHandler
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Process TFE file uploads from session-stored temp paths.
|
* Extract a flat $_FILES-style sub-array from PHP's nested upload structure.
|
||||||
*
|
*
|
||||||
* Used when files are uploaded incrementally via HTMX fragments (upload-tfe-file.php)
|
* PHP normalises FormData names like "queue_file[tfe][]" into:
|
||||||
* rather than submitted in a single multipart form.
|
* $_FILES['queue_file']['name']['tfe'] = [file1, file2, ...]
|
||||||
|
* $_FILES['queue_file']['tmp_name']['tfe'] = [/tmp/..., /tmp/...]
|
||||||
|
* This helper extracts ['tfe'] → ['name' => [...], 'tmp_name' => [...], ...]
|
||||||
|
*/
|
||||||
|
protected function extractFilesSubArray(array $parent, string $key): ?array
|
||||||
|
{
|
||||||
|
if (!isset($parent['name'][$key]) || !is_array($parent['name'][$key])) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
$result = [];
|
||||||
|
foreach (['name', 'tmp_name', 'error', 'size', 'type'] as $field) {
|
||||||
|
$result[$field] = $parent[$field][$key] ?? [];
|
||||||
|
}
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Process TFE file uploads from client-side JS queue (FormData).
|
||||||
|
*
|
||||||
|
* Files arrive via $_FILES['queue_file'] with PHP-nested key extraction.
|
||||||
|
* They are written in the order the user specified (preserved in FormData order).
|
||||||
*
|
*
|
||||||
* @param int $thesisId
|
* @param int $thesisId
|
||||||
* @param array $uploads Array of ['orig_name', 'size', 'mime', 'tmp_path']
|
* @param array|null $uploads Flat $_FILES-style array with 'name', 'tmp_name', etc.
|
||||||
* @param string $folderPath
|
* @param string $folderPath
|
||||||
* @param string $filePrefix
|
* @param string $filePrefix
|
||||||
* @param int $startNum
|
* @param int $startNum
|
||||||
*/
|
*/
|
||||||
protected function handleTfeFilesFromSession(int $thesisId, array $uploads, string $folderPath, string $filePrefix, int $startNum = 1): int
|
protected function handleTfeQueueFiles(int $thesisId, ?array $uploads, string $folderPath, string $filePrefix, int $startNum = 1): int
|
||||||
{
|
{
|
||||||
if (empty($uploads)) {
|
if (!$uploads || !is_array($uploads['name'] ?? null)) {
|
||||||
return $startNum;
|
return $startNum;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -326,77 +346,146 @@ trait ThesisFileHandler
|
|||||||
mkdir($dir, 0755, true);
|
mkdir($dir, 0755, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
$files = [];
|
// Build entries, validate, and classify
|
||||||
foreach ($uploads as $f) {
|
$files = [];
|
||||||
$mimeType = $f['mime'];
|
$vttQueue = [];
|
||||||
$absPath = STORAGE_ROOT . '/' . $f['tmp_path'];
|
$count = count($uploads['name']);
|
||||||
|
|
||||||
if (!file_exists($absPath)) {
|
for ($i = 0; $i < $count; $i++) {
|
||||||
error_log("ThesisFileHandler: session temp file missing {$f['tmp_path']}, skipping");
|
if (($uploads['error'][$i] ?? UPLOAD_ERR_NO_FILE) !== UPLOAD_ERR_OK) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
$ext = strtolower(pathinfo($f['orig_name'], PATHINFO_EXTENSION));
|
$finfo = new \finfo(FILEINFO_MIME_TYPE);
|
||||||
|
$mimeType = $finfo->file($uploads['tmp_name'][$i]);
|
||||||
|
$ext = strtolower(pathinfo($uploads['name'][$i], PATHINFO_EXTENSION));
|
||||||
|
|
||||||
|
if ($mimeType === 'text/plain' && $ext === 'vtt') {
|
||||||
|
$mimeType = 'text/vtt';
|
||||||
|
}
|
||||||
|
if ($mimeType === 'application/octet-stream' && !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
|
||||||
|
error_log("ThesisFileHandler: queue file extension not allowed {$uploads['name'][$i]} ($ext), skipping");
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (!in_array($mimeType, self::ALLOWED_MIME_TYPES, true)
|
||||||
|
&& !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
|
||||||
|
error_log("ThesisFileHandler: invalid queue file type {$uploads['name'][$i]} ($mimeType / $ext), skipping");
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$isPdf = ($mimeType === 'application/pdf' || $ext === 'pdf');
|
||||||
|
$sizeLimit = $isPdf ? self::MAX_PDF_SIZE : self::MAX_FILE_SIZE;
|
||||||
|
if ($uploads['size'][$i] > $sizeLimit) {
|
||||||
|
error_log("ThesisFileHandler: queue file too large {$uploads['name'][$i]} (" . round($uploads['size'][$i] / 1024 / 1024) . ' MB), skipping');
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$entry = [
|
||||||
|
'mimeType' => $mimeType,
|
||||||
|
'ext' => $ext,
|
||||||
|
'size' => $uploads['size'][$i],
|
||||||
|
'tmpName' => $uploads['tmp_name'][$i],
|
||||||
|
'origName' => $uploads['name'][$i],
|
||||||
|
'label' => '',
|
||||||
|
'sortOrder' => null,
|
||||||
|
'fileType' => $this->detectFileType($mimeType, $ext),
|
||||||
|
];
|
||||||
|
|
||||||
|
// VTTs are collected and paired with their preceding video
|
||||||
|
if ($entry['fileType'] === 'caption') {
|
||||||
|
$vttQueue[] = $entry;
|
||||||
|
} else {
|
||||||
|
$files[] = $entry;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Files are written in the order they arrived (user-specified via JS queue order).
|
||||||
|
// VTTs are inserted immediately after the video they follow.
|
||||||
|
$num = $startNum;
|
||||||
|
$videosSeen = 0;
|
||||||
|
|
||||||
|
foreach ($files as $f) {
|
||||||
|
$this->writeTfeFile($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
|
||||||
|
$num++;
|
||||||
|
|
||||||
|
if ($f['fileType'] === 'video' && isset($vttQueue[$videosSeen])) {
|
||||||
|
$this->writeTfeFile($vttQueue[$videosSeen], $thesisId, $dir, $folderPath, $filePrefix, $num);
|
||||||
|
$num++;
|
||||||
|
$videosSeen++;
|
||||||
|
} elseif ($f['fileType'] === 'video') {
|
||||||
|
$videosSeen++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Orphaned VTTs (no preceding video in this batch)
|
||||||
|
for ($i = $videosSeen; $i < count($vttQueue); $i++) {
|
||||||
|
$this->writeTfeFile($vttQueue[$i], $thesisId, $dir, $folderPath, $filePrefix, $num);
|
||||||
|
$num++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $num;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Process annexe file uploads from client-side JS queue (FormData).
|
||||||
|
*
|
||||||
|
* Files arrive via $_FILES['queue_file']['annexe'].
|
||||||
|
*
|
||||||
|
* @param int $thesisId
|
||||||
|
* @param array|null $uploads $_FILES['queue_file']['annexe']-style array
|
||||||
|
* @param string $folderPath
|
||||||
|
* @param string $filePrefix
|
||||||
|
*/
|
||||||
|
protected function handleAnnexeQueueFiles(int $thesisId, ?array $uploads, string $folderPath, string $filePrefix): void
|
||||||
|
{
|
||||||
|
if (!$uploads || !is_array($uploads['name'] ?? null)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$dir = STORAGE_ROOT . '/' . $folderPath;
|
||||||
|
if (!is_dir($dir)) {
|
||||||
|
mkdir($dir, 0755, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
$num = 1;
|
||||||
|
$count = count($uploads['name']);
|
||||||
|
for ($i = 0; $i < $count; $i++) {
|
||||||
|
if (($uploads['error'][$i] ?? UPLOAD_ERR_NO_FILE) !== UPLOAD_ERR_OK) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$finfo = new \finfo(FILEINFO_MIME_TYPE);
|
||||||
|
$mimeType = $finfo->file($uploads['tmp_name'][$i]);
|
||||||
|
$ext = strtolower(pathinfo($uploads['name'][$i], PATHINFO_EXTENSION));
|
||||||
|
|
||||||
if ($mimeType === 'text/plain' && $ext === 'vtt') {
|
if ($mimeType === 'text/plain' && $ext === 'vtt') {
|
||||||
$mimeType = 'text/vtt';
|
$mimeType = 'text/vtt';
|
||||||
}
|
}
|
||||||
|
|
||||||
$files[] = [
|
$padded = sprintf('%02d', $num);
|
||||||
'mimeType' => $mimeType,
|
$targetName = $filePrefix . '_ANNEXE_' . $padded . '.' . $ext;
|
||||||
'ext' => $ext,
|
$targetPath = $dir . $targetName;
|
||||||
'size' => $f['size'],
|
|
||||||
'origName' => $f['orig_name'],
|
|
||||||
'label' => '',
|
|
||||||
'sortOrder' => null,
|
|
||||||
'hierarchy' => $this->tfeHierarchyRank($mimeType, $ext),
|
|
||||||
'fileType' => $this->detectFileType($mimeType, $ext),
|
|
||||||
// Pass the absolute path so writeTfeFile knows where to copy from
|
|
||||||
'srcPath' => $absPath,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort by hierarchy rank
|
if (!move_uploaded_file($uploads['tmp_name'][$i], $targetPath)) {
|
||||||
usort($files, fn($a, $b) => $a['hierarchy'] - $b['hierarchy']);
|
error_log("ThesisFileHandler: failed to move queue annexe {$uploads['name'][$i]}");
|
||||||
|
|
||||||
$videoCount = 0;
|
|
||||||
$vttQueue = [];
|
|
||||||
|
|
||||||
foreach ($files as $f) {
|
|
||||||
if ($f['fileType'] === 'video') {
|
|
||||||
$videoCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$num = $startNum;
|
|
||||||
|
|
||||||
foreach ($files as $f) {
|
|
||||||
if ($f['fileType'] === 'caption') {
|
|
||||||
$vttQueue[] = $f;
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($f['fileType'] === 'video') {
|
chmod($targetPath, 0644);
|
||||||
$this->writeTfeFileFromSrc($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
|
$relPath = $folderPath . $targetName;
|
||||||
$num++;
|
|
||||||
|
|
||||||
if (!empty($vttQueue)) {
|
$this->db->insertThesisFile(
|
||||||
$vtt = array_shift($vttQueue);
|
$thesisId, 'annex',
|
||||||
$this->writeTfeFileFromSrc($vtt, $thesisId, $dir, $folderPath, $filePrefix, $num);
|
$relPath,
|
||||||
$num++;
|
basename($uploads['name'][$i]),
|
||||||
}
|
$uploads['size'][$i],
|
||||||
} else {
|
$mimeType,
|
||||||
$this->writeTfeFileFromSrc($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
|
null,
|
||||||
$num++;
|
null
|
||||||
}
|
);
|
||||||
}
|
error_log("ThesisFileHandler: annexe (queue) moved → $targetName");
|
||||||
|
|
||||||
foreach ($vttQueue as $vtt) {
|
|
||||||
$this->writeTfeFileFromSrc($vtt, $thesisId, $dir, $folderPath, $filePrefix, $num);
|
|
||||||
$num++;
|
$num++;
|
||||||
}
|
}
|
||||||
|
|
||||||
return $num;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -517,60 +606,9 @@ trait ThesisFileHandler
|
|||||||
error_log("ThesisFileHandler: TFE uploaded → $targetName ({$f['fileType']})");
|
error_log("ThesisFileHandler: TFE uploaded → $targetName ({$f['fileType']})");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Write a single TFE file from a source path (session temp) to the thesis folder.
|
|
||||||
* Used by handleTfeFilesFromSession instead of move_uploaded_file.
|
|
||||||
*/
|
|
||||||
protected function writeTfeFileFromSrc(array $f, int $thesisId, string $dir, string $folderPath, string $filePrefix, int $num): void
|
|
||||||
{
|
|
||||||
$padded = sprintf('%02d', $num);
|
|
||||||
$targetName = $filePrefix . '_TFE_' . $padded . '.' . $f['ext'];
|
|
||||||
$targetPath = $dir . $targetName;
|
|
||||||
|
|
||||||
if (!rename($f['srcPath'], $targetPath)) {
|
|
||||||
// Fallback: copy + unlink
|
|
||||||
if (!copy($f['srcPath'], $targetPath)) {
|
|
||||||
error_log("ThesisFileHandler: failed to move session TFE {$f['origName']}");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
unlink($f['srcPath']);
|
|
||||||
}
|
|
||||||
|
|
||||||
chmod($targetPath, 0644);
|
|
||||||
$relPath = $folderPath . $targetName;
|
|
||||||
|
|
||||||
$this->db->insertThesisFile(
|
|
||||||
$thesisId, $f['fileType'],
|
|
||||||
$relPath,
|
|
||||||
basename($f['origName']),
|
|
||||||
$f['size'],
|
|
||||||
$f['mimeType'],
|
|
||||||
$f['label'] !== '' ? $f['label'] : null,
|
|
||||||
$f['sortOrder']
|
|
||||||
);
|
|
||||||
error_log("ThesisFileHandler: TFE (session) moved → $targetName ({$f['fileType']})");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clean up session upload temp files and clear the session entry.
|
|
||||||
* Call after successful commit of TFE files.
|
|
||||||
*/
|
|
||||||
protected function cleanupSessionUploads(): void
|
|
||||||
{
|
|
||||||
$sessionId = session_id();
|
|
||||||
$tempDir = STORAGE_ROOT . '/uploads/' . $sessionId;
|
|
||||||
|
|
||||||
// Remove any remaining files in the temp dir
|
|
||||||
if (is_dir($tempDir)) {
|
|
||||||
$files = glob($tempDir . '/*');
|
|
||||||
foreach ($files as $file) {
|
|
||||||
@unlink($file);
|
|
||||||
}
|
|
||||||
@rmdir($tempDir);
|
|
||||||
}
|
|
||||||
|
|
||||||
unset($_SESSION['tfe_uploads']);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Assign a hierarchy rank for sorting TFE files.
|
* Assign a hierarchy rank for sorting TFE files.
|
||||||
|
|||||||
@@ -246,6 +246,19 @@
|
|||||||
+%%%%%%% diff from: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
|
+%%%%%%% diff from: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
|
||||||
+\\\\\\\ to: yrpmtrsy 21452e6f "fix: scoped HTMX file validation, add validation to TFE/PeerTube inputs" (rebased revision)
|
+\\\\\\\ to: yrpmtrsy 21452e6f "fix: scoped HTMX file validation, add validation to TFE/PeerTube inputs" (rebased revision)
|
||||||
++ $linkName = $link['name'] ?? '';
|
++ $linkName = $link['name'] ?? '';
|
||||||
|
++ $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
|
||||||
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% diff from: yrpmtrsy 21452e6f "fix: scoped HTMX file validation, add validation to TFE/PeerTube inputs" (rebased revision)
|
||||||
|
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ to: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
|
||||||
|
- $linkName = $link['name'] ?? '';
|
||||||
|
- $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
|
||||||
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% diff from: somsyvxz 14a3cd10 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebase destination)
|
||||||
|
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ to: utnzmtom dc313ab2 "Replace HTMX+PHP file upload queues with client-side JS" (rebased revision)
|
||||||
|
$linkName = $link['name'] ?? '';
|
||||||
|
$linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
|
||||||
|
$linkLockedYear = $link['locked_year'] ?? null;
|
||||||
|
+%%%%%%% diff from: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
|
||||||
|
+\\\\\\\ to: ownwlmpo c4c4c8c2 "Replace HTMX+PHP file upload queues with client-side JS" (rebased revision)
|
||||||
|
++ $linkName = $link['name'] ?? '';
|
||||||
++ $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
|
++ $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
|
||||||
?>
|
?>
|
||||||
<tr class="admin-table-row" onclick="event.stopPropagation(); window.open('/partage/<?= urlencode($link['slug']) ?>', '_blank')" style="cursor:pointer">
|
<tr class="admin-table-row" onclick="event.stopPropagation(); window.open('/partage/<?= urlencode($link['slug']) ?>', '_blank')" style="cursor:pointer">
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ $adminMode = $adminMode ?? false;
|
|||||||
|
|
||||||
<!-- File queue — populated by JS -->
|
<!-- File queue — populated by JS -->
|
||||||
<ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés">
|
<ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés">
|
||||||
<!-- Queue rendered server-side via HTMX (upload-tfe-file) -->
|
<!-- File queue rendered client-side by file-upload-queue.js -->
|
||||||
</ul>
|
</ul>
|
||||||
<p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
|
<p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -338,109 +338,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
|
|||||||
unset($_savedPost);
|
unset($_savedPost);
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!-- Edit-only: existing files management -->
|
|
||||||
<div id="edit-existing-files-block">
|
|
||||||
<!-- Existing thesis files — with labels -->
|
|
||||||
<?php $thesisFilesList = array_values(
|
|
||||||
array_filter(
|
|
||||||
$currentFiles,
|
|
||||||
fn($f) => $f["file_type"] !== "cover",
|
|
||||||
),
|
|
||||||
); ?>
|
|
||||||
<?php if (!empty($thesisFilesList)): ?>
|
|
||||||
<div class="admin-form-group">
|
|
||||||
<label>Fichiers du TFE existants :</label>
|
|
||||||
<ul id="existing-files-sortable" class="admin-file-list">
|
|
||||||
<?php foreach ($thesisFilesList as $f):
|
|
||||||
|
|
||||||
$fExt = strtolower(
|
|
||||||
pathinfo($f["file_path"] ?? "", PATHINFO_EXTENSION),
|
|
||||||
);
|
|
||||||
$fType = $f["file_type"] ?? "other";
|
|
||||||
$fIcon = match (true) {
|
|
||||||
$fType === "main" || $fExt === "pdf" => "📄",
|
|
||||||
in_array($fExt, [
|
|
||||||
"jpg",
|
|
||||||
"jpeg",
|
|
||||||
"png",
|
|
||||||
"gif",
|
|
||||||
"webp",
|
|
||||||
])
|
|
||||||
=> "🖼️",
|
|
||||||
$fType === "video" ||
|
|
||||||
in_array($fExt, ["mp4", "webm", "mov", "ogv"])
|
|
||||||
=> "🎬",
|
|
||||||
$fType === "audio" ||
|
|
||||||
in_array($fExt, [
|
|
||||||
"mp3",
|
|
||||||
"ogg",
|
|
||||||
"wav",
|
|
||||||
"flac",
|
|
||||||
"aac",
|
|
||||||
"m4a",
|
|
||||||
])
|
|
||||||
=> "🔊",
|
|
||||||
$fType === "caption" || $fExt === "vtt" => "💬",
|
|
||||||
$fType === "website" => "🌐",
|
|
||||||
default => "📎",
|
|
||||||
};
|
|
||||||
$isExternalUrl =
|
|
||||||
str_starts_with($f["file_path"] ?? "", "http://") ||
|
|
||||||
str_starts_with($f["file_path"] ?? "", "https://");
|
|
||||||
$fLinkHref = $isExternalUrl
|
|
||||||
? htmlspecialchars($f["file_path"])
|
|
||||||
: "/media?path=" . urlencode($f["file_path"]);
|
|
||||||
?>
|
|
||||||
<li class="admin-file-list-item" data-file-id="<?= (int) $f[
|
|
||||||
"id"
|
|
||||||
] ?>">
|
|
||||||
<input type="hidden" name="file_sort_order[]" value="<?= (int) $f[
|
|
||||||
"id"
|
|
||||||
] ?>">
|
|
||||||
|
|
||||||
<span class="admin-file-icon-col"><?= $fIcon ?></span>
|
|
||||||
<span class="admin-file-info">
|
|
||||||
<a href="<?= $fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
|
|
||||||
<?= htmlspecialchars(
|
|
||||||
$f["file_name"] ??
|
|
||||||
basename($f["file_path"]),
|
|
||||||
) ?>
|
|
||||||
</a>
|
|
||||||
<span class="admin-file-meta-row">
|
|
||||||
<span class="admin-file-type-badge"><?= htmlspecialchars(
|
|
||||||
$fType,
|
|
||||||
) ?></span>
|
|
||||||
<?php if (
|
|
||||||
!empty($f["file_size"]) &&
|
|
||||||
$f["file_size"] > 0
|
|
||||||
): ?>
|
|
||||||
<span class="admin-file-size"><?= number_format(
|
|
||||||
$f["file_size"] / 1024 / 1024,
|
|
||||||
2,
|
|
||||||
) ?> MB</span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</span>
|
|
||||||
<input type="text" name="file_label[<?= (int) $f[
|
|
||||||
"id"
|
|
||||||
] ?>]"
|
|
||||||
value="<?= htmlspecialchars(
|
|
||||||
$f["display_label"] ?? "",
|
|
||||||
) ?>"
|
|
||||||
placeholder="Légende / description (optionnel)"
|
|
||||||
class="admin-file-label-input">
|
|
||||||
</span>
|
|
||||||
<label class="admin-checkbox-label admin-file-delete">
|
|
||||||
<input type="checkbox" name="delete_files[]" value="<?= (int) $f[
|
|
||||||
"id"
|
|
||||||
] ?>"> Supprimer
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<?php
|
|
||||||
endforeach; ?>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div><!-- #edit-existing-files-block -->
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- ═══════════════════ Métadonnées complémentaires ═══════════════════
|
<!-- ═══════════════════ Métadonnées complémentaires ═══════════════════
|
||||||
|
|||||||
1266
docs/cms-migration-plan.html
Normal file
1266
docs/cms-migration-plan.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user