mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
feat: multi-type file upload with sort order, labels, and expanded MIME support
- DB migration 007: add sort_order + display_label to thesis_files - Database: getThesisFiles ordered by sort_order; insertThesisFile accepts label/order; new reorderThesisFiles() and updateThesisFileLabel() methods - ThesisCreateController + ThesisEditController: expand allowed MIME/exts to include audio (mp3/ogg/wav/flac/aac/m4a), video (webm/mov/ogv), image (gif/webp), archives (tar/gz), any-ext via octet-stream; max size raised to 500 MB; accept file_labels[] and file_orders[] POST fields; detectFileType() helper - MediaController: expanded MIME allowlist; HTTP Range support for audio/video; force-download for unknown types; inline for known displayable types - fieldset-files.php: sortable queue UI with SortableJS, per-file labels, 500 MB hint - templates/admin/edit.php: existing files as sortable list with drag handles, type icons, label inputs, delete checkboxes, hidden sort-order fields - file-upload-queue.js: new JS replacing file-preview.js — sortable new-file queue, per-file labels, hidden order fields on submit, backward-compat legacy preview - tfe.php: renders audio (<audio>), all video formats, images, PDF, and download-only 'other' files; reads display_label; sorted by sort_order - tfe.css + form.css: styles for audio player, download files, sortable queue, drag handles, file type badges, label inputs - .htaccess + .user.ini: upload_max_filesize=512M / post_max_size=520M
This commit is contained in:
Pontoporeia
@@ -585,6 +585,222 @@ label:has(+ div > input:required)::after {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* ── TFE file upload queue (.tfe-file-queue) ────────────────────────────── */
|
||||
|
||||
.admin-files-fieldgroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3xs);
|
||||
}
|
||||
|
||||
.tfe-file-picker {
|
||||
font-size: var(--step--1);
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border-primary);
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tfe-file-picker:hover {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.sortable-list {
|
||||
list-style: none;
|
||||
margin: var(--space-2xs) 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2xs);
|
||||
}
|
||||
|
||||
/* New-file queue items */
|
||||
.tfe-file-queue {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.tfe-queue-empty {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
margin: var(--space-3xs) 0 0;
|
||||
}
|
||||
|
||||
.tfe-file-queue:not(:empty) + .tfe-queue-empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fq-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fq-drag-handle,
|
||||
.admin-file-drag-handle {
|
||||
cursor: grab;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
padding: 0 var(--space-3xs);
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.fq-drag-handle:active,
|
||||
.admin-file-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.fq-ghost,
|
||||
.sortable-ghost {
|
||||
opacity: 0.4;
|
||||
background: var(--accent-muted, #f0f0f0);
|
||||
}
|
||||
|
||||
.fq-icon {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fq-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3xs);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fq-name {
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fq-size {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.fq-label,
|
||||
.admin-file-label-input {
|
||||
font-size: var(--step--2);
|
||||
font-family: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding: 2px 0;
|
||||
width: 100%;
|
||||
color: var(--text-primary);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fq-label:focus,
|
||||
.admin-file-label-input:focus {
|
||||
outline: none;
|
||||
border-bottom-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.fq-remove {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Existing-files list (edit form) ─────────────────────────────────────── */
|
||||
|
||||
.admin-file-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.admin-file-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-file-icon-col {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
width: 1.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-file-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-file-name {
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
a.admin-file-name {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
a.admin-file-name:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.admin-file-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-file-type-badge {
|
||||
font-size: var(--step--2);
|
||||
padding: 1px 5px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-file-size {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.admin-file-delete {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Recap file list (admin & partage recapitulatif) ────────────────────── */
|
||||
.recap-file-list {
|
||||
list-style: none;
|
||||
|
||||
@@ -151,6 +151,53 @@ aside figcaption {
|
||||
margin: var(--space-3xs) 0 0;
|
||||
}
|
||||
|
||||
/* Audio player */
|
||||
.tfe-audio {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Download-only files */
|
||||
.tfe-download-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-s) var(--space-m);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tfe-download-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tfe-download-link:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.tfe-download-icon {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tfe-download-size {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.tfe-pdf-fallback a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: underline;
|
||||
|
||||
276
app/public/assets/js/file-upload-queue.js
Normal file
276
app/public/assets/js/file-upload-queue.js
Normal file
@@ -0,0 +1,276 @@
|
||||
/**
|
||||
* file-upload-queue.js
|
||||
*
|
||||
* Powers two UI features:
|
||||
*
|
||||
* 1. TFE multi-file upload queue (#tfe-file-queue)
|
||||
* - Renders each selected file as a sortable row with icon, name, size
|
||||
* and an optional label input.
|
||||
* - Drag-to-reorder via SortableJS.
|
||||
* - Injects hidden `file_labels[]` and `file_orders[]` inputs so PHP
|
||||
* receives per-file label and intended sort-order data.
|
||||
* - Works for both the add/partage form (pure new uploads) and the edit
|
||||
* form (new uploads only; existing-file sort is handled server-side).
|
||||
*
|
||||
* 2. Legacy single-file previews (data-preview="CONTAINER_ID")
|
||||
* - Backward-compatible with cover-image and banner inputs.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* ── Helpers ──────────────────────────────────────────────────────────── */
|
||||
|
||||
const ICONS = {
|
||||
pdf: '📄',
|
||||
video: '🎬',
|
||||
audio: '🔊',
|
||||
zip: '🗜️',
|
||||
vtt: '💬',
|
||||
image: '🖼️',
|
||||
other: '📎',
|
||||
};
|
||||
|
||||
function iconFor(file) {
|
||||
const t = file.type || '';
|
||||
const n = file.name.toLowerCase();
|
||||
if (t.startsWith('image/')) return ICONS.image;
|
||||
if (t === 'application/pdf' || n.endsWith('.pdf')) return ICONS.pdf;
|
||||
if (t.startsWith('video/') || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICONS.video;
|
||||
if (t.startsWith('audio/') || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICONS.audio;
|
||||
if (t === 'application/zip' || /\.(zip|tar|gz|tgz)$/.test(n)) return ICONS.zip;
|
||||
if (n.endsWith('.vtt')) return ICONS.vtt;
|
||||
return ICONS.other;
|
||||
}
|
||||
|
||||
function humanSize(bytes) {
|
||||
if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
|
||||
if (bytes >= 1048576) return (bytes / 1048576).toFixed(2) + ' MB';
|
||||
if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return bytes + ' B';
|
||||
}
|
||||
|
||||
function esc(str) {
|
||||
return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
/* ── DataTransfer-backed file list ────────────────────────────────────── */
|
||||
// We keep a parallel array so we can freely re-order and remove files
|
||||
// then reconstruct a proper FileList via DataTransfer when needed.
|
||||
|
||||
function syncInputFiles(input, fileArray) {
|
||||
try {
|
||||
const dt = new DataTransfer();
|
||||
fileArray.forEach(f => dt.items.add(f));
|
||||
input.files = dt.files;
|
||||
} catch (e) {
|
||||
// DataTransfer not available in older browsers — graceful degradation.
|
||||
}
|
||||
}
|
||||
|
||||
/* ── TFE file queue ───────────────────────────────────────────────────── */
|
||||
|
||||
function initFileQueue() {
|
||||
const picker = document.getElementById('tfe-files-input');
|
||||
const queue = document.getElementById('tfe-file-queue');
|
||||
const empty = document.getElementById('tfe-file-queue-empty');
|
||||
|
||||
if (!picker || !queue) return;
|
||||
|
||||
// Array parallel to the visual queue
|
||||
let fileArray = [];
|
||||
|
||||
// Keep SortableJS instance reference
|
||||
let sortable = null;
|
||||
if (typeof Sortable !== 'undefined') {
|
||||
sortable = Sortable.create(queue, {
|
||||
animation: 150,
|
||||
handle: '.fq-drag-handle',
|
||||
ghostClass: 'fq-ghost',
|
||||
onEnd: () => reorderFiles(),
|
||||
});
|
||||
}
|
||||
|
||||
picker.addEventListener('change', function () {
|
||||
const newFiles = Array.from(picker.files);
|
||||
fileArray = fileArray.concat(newFiles);
|
||||
renderQueue();
|
||||
// Reset input so the same file can be selected again if needed
|
||||
picker.value = '';
|
||||
});
|
||||
|
||||
function renderQueue() {
|
||||
queue.innerHTML = '';
|
||||
|
||||
if (fileArray.length === 0) {
|
||||
empty.style.display = '';
|
||||
syncInputFiles(picker, []);
|
||||
return;
|
||||
}
|
||||
empty.style.display = 'none';
|
||||
|
||||
fileArray.forEach(function (file, idx) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'fq-item';
|
||||
li.setAttribute('data-idx', idx);
|
||||
|
||||
li.innerHTML =
|
||||
'<span class="fq-drag-handle" title="Réordonner">⠿</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>' +
|
||||
'<input type="text" class="fq-label admin-file-label-input" ' +
|
||||
'placeholder="Légende / description (optionnel)">' +
|
||||
'</span>' +
|
||||
'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' + esc(file.name) + '">✕</button>';
|
||||
|
||||
// Remove button
|
||||
li.querySelector('.fq-remove').addEventListener('click', function () {
|
||||
fileArray.splice(idx, 1);
|
||||
renderQueue();
|
||||
});
|
||||
|
||||
queue.appendChild(li);
|
||||
});
|
||||
|
||||
syncInputFiles(picker, fileArray);
|
||||
injectHiddenFields();
|
||||
}
|
||||
|
||||
function reorderFiles() {
|
||||
// Re-sync fileArray to match current DOM order
|
||||
const items = Array.from(queue.querySelectorAll('.fq-item'));
|
||||
const newArr = items.map(li => fileArray[parseInt(li.getAttribute('data-idx'), 10)]);
|
||||
fileArray = newArr;
|
||||
// Re-render to update data-idx attributes
|
||||
renderQueue();
|
||||
}
|
||||
|
||||
function injectHiddenFields() {
|
||||
// Remove previous hidden fields
|
||||
const form = picker.closest('form');
|
||||
if (!form) return;
|
||||
form.querySelectorAll('.fq-hidden-label, .fq-hidden-order').forEach(el => el.remove());
|
||||
|
||||
// Inject current labels and order indices
|
||||
// We use the queue DOM (post-sort) as the source of truth.
|
||||
const items = Array.from(queue.querySelectorAll('.fq-item'));
|
||||
items.forEach(function (li, sortedIdx) {
|
||||
const labelVal = li.querySelector('.fq-label').value;
|
||||
|
||||
const lInput = document.createElement('input');
|
||||
lInput.type = 'hidden';
|
||||
lInput.name = 'file_labels[]';
|
||||
lInput.value = labelVal;
|
||||
lInput.className = 'fq-hidden-label';
|
||||
form.appendChild(lInput);
|
||||
|
||||
const oInput = document.createElement('input');
|
||||
oInput.type = 'hidden';
|
||||
oInput.name = 'file_orders[]';
|
||||
oInput.value = sortedIdx + 1;
|
||||
oInput.className = 'fq-hidden-order';
|
||||
form.appendChild(oInput);
|
||||
});
|
||||
}
|
||||
|
||||
// Before form submit, inject hidden fields so labels are up-to-date
|
||||
const form = picker.closest('form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', function () {
|
||||
syncInputFiles(picker, fileArray);
|
||||
injectHiddenFields();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Existing-files sortable (edit form only) ─────────────────────────── */
|
||||
|
||||
function initExistingFilesSortable() {
|
||||
const list = document.getElementById('existing-files-sortable');
|
||||
if (!list || typeof Sortable === 'undefined') return;
|
||||
|
||||
Sortable.create(list, {
|
||||
animation: 150,
|
||||
handle: '.admin-file-drag-handle',
|
||||
ghostClass: 'fq-ghost',
|
||||
onEnd: function () {
|
||||
// Update the hidden file_sort_order[] inputs to reflect new order
|
||||
const items = list.querySelectorAll('.admin-file-list-item[data-file-id]');
|
||||
list.querySelectorAll('input[name="file_sort_order[]"]').forEach(el => el.remove());
|
||||
items.forEach(function (li) {
|
||||
const inp = document.createElement('input');
|
||||
inp.type = 'hidden';
|
||||
inp.name = 'file_sort_order[]';
|
||||
inp.value = li.getAttribute('data-file-id');
|
||||
li.prepend(inp);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Legacy single-file preview (data-preview="CONTAINER_ID") ─────────── */
|
||||
|
||||
function initLegacyPreviews() {
|
||||
document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
|
||||
// Skip the TFE multi-file picker (handled by queue above)
|
||||
if (input.id === 'tfe-files-input') return;
|
||||
|
||||
const containerId = input.getAttribute('data-preview');
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
input.addEventListener('change', function () {
|
||||
renderLegacyPreview(input, container);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderLegacyPreview(input, container) {
|
||||
container.innerHTML = '';
|
||||
const files = Array.from(input.files);
|
||||
if (!files.length) return;
|
||||
|
||||
files.forEach(function (file) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'fp-item';
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'fp-thumb';
|
||||
img.alt = file.name;
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) { img.src = e.target.result; };
|
||||
reader.readAsDataURL(file);
|
||||
item.appendChild(img);
|
||||
} else {
|
||||
const icon = document.createElement('span');
|
||||
icon.className = 'fp-icon';
|
||||
icon.textContent = iconFor(file);
|
||||
item.appendChild(icon);
|
||||
}
|
||||
|
||||
const 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 ────────────────────────────────────────────────────────── */
|
||||
|
||||
function init() {
|
||||
initFileQueue();
|
||||
initExistingFilesSortable();
|
||||
initLegacyPreviews();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user