PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: req annexes, add HTMX inline file validation (MIME/size)

Browse Source 
- Annexes file input now required when 'has_annexes' checkbox is checked
- PHP-side validation: if has_annexes but no files, throw error
- HTMX inline file validation: POSTs to validate-file-fragment on file change
  - Validates MIME type against per-field whitelists (couverture, note_intention,
    tfe, annexes)
  - Validates file size with PDF-specific 100MB limit
  - Supports both single-file and multi-file inputs
  - Returns green ✓ or red ✕ inline validation messages
- Shared validation logic in src/Controllers/validate-file-fragment-shared.php
- Admin wrapper: admin/validate-file-fragment.php (with AdminAuth guard)
- Partage route: /partage/validate-file-fragment (dispatched via index.php)
- CSS: .file-validation-msg, .fv-ok (green), .fv-error (red)
- file-field.php: accepts $fieldName for per-input validation type,
  auto-detects admin/partage validate URL
This commit is contained in:
Pontoporeia
2026-05-10 15:55:35 +02:00
parent a1a5d4609f
commit e06a317499
10 changed files with 503 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/public/assets/css/form.css
View File

@@ -516,6 +516,22 @@
color: var(--text-tertiary);
}
/* ── Inline file validation messages (HTMX) ──────────────────────────────── */
.file-validation-msg {
margin-top: var(--space-3xs);
font-size: var(--step--2);
line-height: 1.5;
}
.fv-ok {
color: var(--success, #2d6a4f);
}
.fv-error {
color: var(--danger, #c1121f);
}
/* ── TFE file upload queue (.tfe-file-queue) ────────────────────────────── */
.admin-files-fieldgroup {

348
app/public/assets/js/file-upload-queue.js
View File

@@ -11,139 +11,245 @@
* after swap without a global event listener.
*/
window.XamxamInitFileUploads = function () {
console.log('[file-upload-queue] XamxamInitFileUploads called');
var ICON = {
pdf: '\uD83D\uDCC4', video: '\uD83C\uDFAC', audio: '\uD83D\uDD0A',
zip: '\uD83D\uDDDC\uFE0F', vtt: '\uD83D\uDCAC', image: '\uD83D\uDDBC\uFE0F', other: '\uD83D\uDCCE'
};
console.log("[file-upload-queue] XamxamInitFileUploads called");
var ICON = {
pdf: "\uD83D\uDCC4",
video: "\uD83C\uDFAC",
audio: "\uD83D\uDD0A",
zip: "\uD83D\uDDDC\uFE0F",
vtt: "\uD83D\uDCAC",
image: "\uD83D\uDDBC\uFE0F",
other: "\uD83D\uDCCE",
};
function iconFor(file) {
var t = file.type || '', n = file.name.toLowerCase();
if (/^image\//.test(t)) return ICON.image;
if (t === 'application/pdf' || /\.pdf$/.test(n)) return ICON.pdf;
if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICON.video;
if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICON.audio;
if (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
if (/\.vtt$/.test(n)) return ICON.vtt;
return ICON.other;
}
function iconFor(file) {
var t = file.type || "",
n = file.name.toLowerCase();
if (/^image\//.test(t)) return ICON.image;
if (t === "application/pdf" || /\.pdf$/.test(n)) return ICON.pdf;
if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n))
return ICON.video;
if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n))
return ICON.audio;
if (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
if (/\.vtt$/.test(n)) return ICON.vtt;
return ICON.other;
}
function humanSize(b) {
return b >= 1073741824 ? (b / 1073741824).toFixed(2) + ' GB'
: b >= 1048576 ? (b / 1048576).toFixed(2) + ' MB'
: b >= 1024 ? (b / 1024).toFixed(1) + ' KB'
: b + ' B';
}
function humanSize(b) {
return b >= 1073741824
? (b / 1073741824).toFixed(2) + " GB"
: b >= 1048576
? (b / 1048576).toFixed(2) + " MB"
: b >= 1024
? (b / 1024).toFixed(1) + " KB"
: b + " B";
}
function esc(s) { return s.replace(/[&<>"]/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]; }); }
function esc(s) {
return s.replace(/[&<>"]/g, function (c) {
return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c];
});
}
// ── 1. TFE multi-file queue ────────────────────────────────────────────
var picker = document.getElementById('tfe-files-input');
var queue = document.getElementById('tfe-file-queue');
var empty = document.getElementById('tfe-file-queue-empty');
var sortHint = document.getElementById('tfe-file-queue-sort-hint');
if (picker && queue) {
console.log('[file-upload-queue] init TFE queue picker=', picker, 'multiple=', picker.multiple);
var fileArray = [];
// ── 1. TFE multi-file queue ────────────────────────────────────────────
var picker = document.getElementById("tfe-files-input");
var queue = document.getElementById("tfe-file-queue");
var empty = document.getElementById("tfe-file-queue-empty");
var sortHint = document.getElementById("tfe-file-queue-sort-hint");
if (picker && queue) {
console.log(
"[file-upload-queue] init TFE queue picker=",
picker,
"multiple=",
picker.multiple,
);
var fileArray = [];
if (typeof Sortable !== 'undefined') {
Sortable.create(queue, { animation: 150, handle: '.fq-drag-handle', ghostClass: 'fq-ghost',
onEnd: function () {
var items = queue.querySelectorAll('.fq-item');
var newArr = Array.prototype.map.call(items, function (li) { return fileArray[parseInt(li.getAttribute('data-idx'), 10)]; });
fileArray = newArr;
renderQueue();
}
});
}
if (typeof Sortable !== "undefined") {
Sortable.create(queue, {
animation: 150,
handle: ".fq-drag-handle",
ghostClass: "fq-ghost",
onEnd: function () {
var items = queue.querySelectorAll(".fq-item");
var newArr = Array.prototype.map.call(items, function (li) {
return fileArray[parseInt(li.getAttribute("data-idx"), 10)];
});
fileArray = newArr;
renderQueue();
},
});
}
picker.onchange = function () {
console.log('[file-upload-queue] onchange fired, files count:', picker.files.length, 'names:', Array.from(picker.files).map(function(f){return f.name}));
fileArray = fileArray.concat(Array.from(picker.files));
console.log('[file-upload-queue] fileArray after concat, length:', fileArray.length);
picker.value = '';
renderQueue();
};
picker.onchange = function () {
console.log(
"[file-upload-queue] onchange fired, files count:",
picker.files.length,
"names:",
Array.from(picker.files).map(function (f) {
return f.name;
}),
);
fileArray = fileArray.concat(Array.from(picker.files));
console.log(
"[file-upload-queue] fileArray after concat, length:",
fileArray.length,
);
picker.value = "";
renderQueue();
};
function renderQueue() {
queue.innerHTML = '';
if (!fileArray.length) { empty.style.display = ''; if (sortHint) sortHint.style.display = 'none'; injectHiddenFields([]); return; }
empty.style.display = 'none';
if (sortHint) sortHint.style.display = '';
fileArray.forEach(function (file, idx) {
var li = document.createElement('li');
li.className = 'fq-item';
li.setAttribute('data-idx', idx);
li.innerHTML =
'<span class="fq-drag-handle" title="R\u00e9ordonner">\u2820</span>' +
'<span class="fq-icon">' + iconFor(file) + '</span>' +
'<span class="fq-info"><span class="fq-name">' + esc(file.name) + '</span>' +
'<span class="fq-size">' + humanSize(file.size) + '</span></span>' +
'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' + esc(file.name) + '">&#x2715;</button>';
li.querySelector('.fq-remove').onclick = (function (i) { return function () { fileArray.splice(i, 1); renderQueue(); }; })(idx);
queue.appendChild(li);
});
injectHiddenFields(Array.from(queue.querySelectorAll('.fq-item')));
}
function renderQueue() {
queue.innerHTML = "";
if (!fileArray.length) {
empty.style.display = "";
if (sortHint) sortHint.style.display = "none";
injectHiddenFields([]);
return;
}
empty.style.display = "none";
if (sortHint) sortHint.style.display = "";
fileArray.forEach(function (file, idx) {
var li = document.createElement("li");
li.className = "fq-item";
li.setAttribute("data-idx", idx);
li.innerHTML =
'<span class="fq-drag-handle" title="R\u00e9ordonner">\u2820</span>' +
'<span class="fq-icon">' +
iconFor(file) +
"</span>" +
'<span class="fq-info"><span class="fq-name">' +
esc(file.name) +
"</span>" +
'<span class="fq-size">' +
humanSize(file.size) +
"</span></span>" +
'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' +
esc(file.name) +
'">&#x2715;</button>';
li.querySelector(".fq-remove").onclick = (function (i) {
return function () {
fileArray.splice(i, 1);
renderQueue();
};
})(idx);
queue.appendChild(li);
});
injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
}
function injectHiddenFields(items) {
var form = picker.closest('form');
if (!form) return;
form.querySelectorAll('.fq-hidden-label, .fq-hidden-order').forEach(function (el) { el.remove(); });
items.forEach(function (li, sortedIdx) {
var label = li.querySelector('.fq-label');
var lInp = document.createElement('input'); lInp.type = 'hidden'; lInp.name = 'file_labels[]'; lInp.value = label ? label.value : ''; lInp.className = 'fq-hidden-label'; form.appendChild(lInp);
var oInp = document.createElement('input'); oInp.type = 'hidden'; oInp.name = 'file_orders[]'; oInp.value = sortedIdx + 1; oInp.className = 'fq-hidden-order'; form.appendChild(oInp);
});
}
function injectHiddenFields(items) {
var form = picker.closest("form");
if (!form) return;
form
.querySelectorAll(".fq-hidden-label, .fq-hidden-order")
.forEach(function (el) {
el.remove();
});
items.forEach(function (li, sortedIdx) {
var label = li.querySelector(".fq-label");
var lInp = document.createElement("input");
lInp.type = "hidden";
lInp.name = "file_labels[]";
lInp.value = label ? label.value : "";
lInp.className = "fq-hidden-label";
form.appendChild(lInp);
var oInp = document.createElement("input");
oInp.type = "hidden";
oInp.name = "file_orders[]";
oInp.value = sortedIdx + 1;
oInp.className = "fq-hidden-order";
form.appendChild(oInp);
});
}
// On submit, refresh hidden fields from current queue state
var form = picker.closest('form');
if (form) form.addEventListener('submit', function () { injectHiddenFields(Array.from(queue.querySelectorAll('.fq-item'))); });
}
// On submit, refresh hidden fields from current queue state
var form = picker.closest("form");
if (form)
form.addEventListener("submit", function () {
injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
});
}
// ── 2. Single-file previews (data-preview attribute) ────────────────────
document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
if (input.id === 'tfe-files-input') return;
console.log('[file-upload-queue] binding preview for', input.id, 'multiple=', input.multiple);
var container = document.getElementById(input.getAttribute('data-preview'));
if (!container) return;
input.onchange = function () {
container.innerHTML = '';
Array.from(input.files).forEach(function (file) {
var item = document.createElement('div'); item.className = 'fp-item';
if (/^image\//.test(file.type)) {
var img = document.createElement('img'); img.className = 'fp-thumb'; img.alt = file.name;
var reader = new FileReader();
reader.onload = function (e) { img.src = e.target.result; };
reader.readAsDataURL(file);
item.appendChild(img);
} else {
var ic = document.createElement('span'); ic.className = 'fp-icon'; ic.textContent = iconFor(file);
item.appendChild(ic);
}
var meta = document.createElement('span'); meta.className = 'fp-meta';
meta.innerHTML = '<span class="fp-name">' + esc(file.name) + '</span><span class="fp-size">' + humanSize(file.size) + '</span>';
item.appendChild(meta);
container.appendChild(item);
});
};
});
// ── 2. Single-file previews (data-preview attribute) ────────────────────
document
.querySelectorAll('input[type="file"][data-preview]')
.forEach(function (input) {
if (input.id === "tfe-files-input") return;
console.log(
"[file-upload-queue] binding preview for",
input.id,
"multiple=",
input.multiple,
);
var container = document.getElementById(
input.getAttribute("data-preview"),
);
if (!container) return;
input.onchange = function () {
container.innerHTML = "";
Array.from(input.files).forEach(function (file) {
var item = document.createElement("div");
item.className = "fp-item";
if (/^image\//.test(file.type)) {
var img = document.createElement("img");
img.className = "fp-thumb";
img.alt = file.name;
var reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result;
};
reader.readAsDataURL(file);
item.appendChild(img);
} else {
var ic = document.createElement("span");
ic.className = "fp-icon";
ic.textContent = iconFor(file);
item.appendChild(ic);
}
var meta = document.createElement("span");
meta.className = "fp-meta";
meta.innerHTML =
'<span class="fp-name">' +
esc(file.name) +
'</span><span class="fp-size">' +
humanSize(file.size) +
"</span>";
item.appendChild(meta);
container.appendChild(item);
});
};
});
// ── 3. Existing-files sortable (edit mode) ──────────────────────────────
var sortList = document.getElementById('existing-files-sortable');
if (sortList && typeof Sortable !== 'undefined') {
Sortable.create(sortList, { animation: 150, handle: '.admin-file-drag-handle', ghostClass: 'fq-ghost',
onEnd: function () {
sortList.querySelectorAll('input[name="file_sort_order[]"]').forEach(function (el) { el.remove(); });
sortList.querySelectorAll('.admin-file-list-item[data-file-id]').forEach(function (li) {
var inp = document.createElement('input'); inp.type = 'hidden'; inp.name = 'file_sort_order[]'; inp.value = li.getAttribute('data-file-id'); li.prepend(inp);
});
}
});
}
// ── 3. Existing-files sortable (edit mode) ──────────────────────────────
var sortList = document.getElementById("existing-files-sortable");
if (sortList && typeof Sortable !== "undefined") {
Sortable.create(sortList, {
animation: 150,
handle: ".admin-file-drag-handle",
ghostClass: "fq-ghost",
onEnd: function () {
sortList
.querySelectorAll('input[name="file_sort_order[]"]')
.forEach(function (el) {
el.remove();
});
sortList
.querySelectorAll(".admin-file-list-item[data-file-id]")
.forEach(function (li) {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "file_sort_order[]";
inp.value = li.getAttribute("data-file-id");
li.prepend(inp);
});
},
});
}
};
// Bootstrap on page load
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', window.XamxamInitFileUploads);
if (document.readyState === "loading")
document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
else window.XamxamInitFileUploads();