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
2026-05-06 11:09:18 +02:00 · 2026-04-30 13:07:09 +02:00
parent 2188ff5479
commit a83dc1c74e
17 changed files with 1026 additions and 274 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -1,131 +1,28 @@
-# TODO
+# XAMXAM TODO

-## Admin area cleanup
+## File Upload & Display System

- [x] Combine `acces-etudiante.php` + `file-access.php` into `acces.php` (two `<section>` blocks)
- [x] Move `system.php` content into `parametres.php` (system section + logs section)
- [x] Use `<section>` for sections, `<fieldset>` only where form fields are present
- [x] Redirect legacy URLs (acces-etudiante.php, file-access.php, system.php) with 301
- [x] Update action redirects to point to new pages
- [x] Update admin nav header (merged 3 items → 2)
+- [x] **DB migration 007** — add `sort_order` and `display_label` columns to `thesis_files`
+- [x] **Database.php** — `getThesisFiles` ordered by `sort_order ASC`; `insertThesisFile` accepts `display_label` + `sort_order`; new `reorderThesisFiles()` and `updateThesisFileLabel()` methods
+- [x] **ThesisCreateController** — expand MIME/ext allowlist (audio: mp3/ogg/wav/flac/aac/m4a; video: webm/mov/ogv; image: gif/webp; archives: tar/gz; any-ext via octet-stream); raise max size to 500 MB; accept `file_labels[]` and `file_orders[]` POST fields; `detectFileType()` helper
+- [x] **ThesisEditController** — same expansions; handle `file_sort_order[]`, `file_label[id]` POST fields; reorder + label-update methods called; `detectFileType()` helper
+- [x] **MediaController** — expanded MIME allowlist; HTTP Range support for audio/video seeking; force-download for "other" types; inline display for known displayable types
+- [x] **fieldset-files.php** (shared partial) — replaced old multi-file input with sortable queue UI using SortableJS; per-file label inputs; wide accept attribute; 500 MB hint
+- [x] **templates/admin/edit.php** — existing files rendered as sortable list with drag handles, file type icons, label inputs, delete checkboxes; hidden `file_sort_order[]` inputs; new-file queue widget
+- [x] **file-upload-queue.js** — new JS: sortable queue for new uploads (SortableJS), per-file label fields, hidden order fields injected on submit; existing-file drag-sort; backward-compatible legacy preview for cover/banner inputs
+- [x] **tfe.php** (public template) — handles audio (`<audio>`), video (all exts), image, PDF, "other" (download link); reads `display_label`; files already sorted by `sort_order`
+- [x] **tfe.css** — styles for `.tfe-audio`, `.tfe-download-file`, `.tfe-download-link`
+- [x] **form.css** — styles for `.tfe-file-queue`, `.fq-item`, `.admin-file-list-item` (sortable), drag handles, label inputs, ghost class
+- [x] **PHP upload limits** — `.htaccess` + `.user.ini` in `public/` with `upload_max_filesize=512M` / `post_max_size=520M`
+- [x] **add.php / edit.php / partage/index.php** — use `sortable.min.js` + `file-upload-queue.js` instead of `file-preview.js`

-## Bug fixes
-
- [x] Fix `$enabledAccessTypes` undefined / `array_map()` TypeError on edit page — controller was fetching `getAccessTypes()` instead of `getEnabledFormAccessTypes()` and returning it under the wrong key
- [x] Fix fatal TypeError: `old()` called with wrong arity in `jury-fieldset.php` partial under partage context — removed `?: null` coercions so `$juryPresident`/`$juryPromoteur` are `''` not `null`, keeping `$addMode` false
- [x] Fix `$formData` destroyed by included partials (`fieldset-academic.php`, `fieldset-metadata.php`, `fieldset-licence-explanation.php` were incorrectly unsetting `$formData`/wrong variable in caller scope)
-
-## Form help blocks — sortable admin UI
-
- [x] Migration 005: add `sort_order` column to `form_help_blocks`
- [x] `Database::getAllFormHelpBlocks()` — ORDER BY sort_order, expose sort_order in returned data
- [x] `Database::reorderFormHelpBlocks(array $keys)` — persist new order
- [x] `actions/form-help-reorder.php` — HTMX POST handler (CSRF-protected, 204 response)
- [x] `templates/admin/contenus.php` — replace table with two-panel layout:
-  - Left: SortableJS + htmx drag-and-drop card list
-  - Right: static form structure reference (fieldsets + inputs)
- [x] CSS in admin.css: `.fhb-*` classes for layout, cards, ghost/chosen/drag states
- [x] `schema.sql` — updated `form_help_blocks` DDL with `sort_order`
- [x] Vendor SortableJS 1.15.2 into `assets/js/sortable.min.js` (remove CDN dependency)
-
-## Bug fixes (continued)
-
- [x] Fix missing favicon tags in `partage/recapitulatif.php`
- [x] Fix fatal `Class "SmtpRelay" not found` in `StudentEmail.php` — add `require_once SmtpRelay.php` before `StudentEmail.php` in `partage/index.php`
-
- [x] Add missing favicon tags to all three `<head>` blocks in `partage/index.php` (error page, password gate, main form)
-
-## Rename posterg → xamxam throughout codebase
-
- [x] Rename `nginx/posterg.conf` → `nginx/xamxam.conf` (+ `.conf.reference`)
- [x] Update nginx conf: `server_name`, log paths, htpasswd path, header comments
- [x] Update `justfile`: SSH host alias, group, DB filename, conf path, tmp paths
- [x] Update `scripts/deploy-server.sh`: group, conf paths, site names, URLs
- [x] Update `scripts/setup-server.sh`: APP_DIR, APP_GROUP, comments
- [x] Update `scripts/manage-admin-users.sh`: htpasswd path
- [x] Update `scripts/migrate.sh`: DB filename
- [x] Update `scripts/setup-dev.sh`: DB filename
- [x] Update `scripts/copy_crash_logs.sh`: log filenames, hostname
- [x] Update `README.md`: SSH host, paths, DB name
- [x] Update `nginx/README.md`, `nginx/SETUP.md`, and all `nginx/docs/*.md`
- [x] Update PHP source: `Database.php`, `SystemController.php`, `MediaController.php`, `LiveReloadController.php`, `SmtpRelay.php`, `live-reload.php`, export actions
- [x] Update `app/migrations/run.php`, `app/tests/README.md`, `app/storage/README.md`
- [x] Replace all remaining "Post-ERG" branding with "XAMXAM" (scripts, PHP source, schema, docs)
- [x] `deploy-server.sh`: remove legacy `sites-enabled/posterg` symlink to fix duplicate `limit_req_zone` nginx error
- [x] `deploy-server.sh`: auto-migrate `.htpasswd-posterg` → `.htpasswd-xamxam` if new file absent
- [x] `deploy-server.sh`: auto-migrate `posterg.db` → `xamxam.db` if new DB missing/empty; remove legacy file
- [x] `deploy-server.sh`: clean up legacy posterg nginx configs and prune old backups
- [x] Rename local `storage/posterg.db` → `storage/xamxam.db`
-
-## LDAP auth migration (pending client access)
-
- [ ] Get LDAP server hostname, port, service-account DN+password, base DN, user attr, group DN from client
- [ ] Verify TCP reachability from XAMXAM VM to LDAP server (port 636)
- [ ] See `docs/LDAP_AUTH_PLAN.md` for full phase-by-phase plan
-
-## SMTP transport security hardening
-
- [x] Enable TLS peer verification (`verify_peer`, `verify_peer_name`, `peer_name`) on both `smtpSend` and `smtpProbe` — removes MITM vulnerability from `verify_peer: false`
- [x] Add `caBundlePath()` — resolves system CA bundle path (php.ini → Debian/RHEL/Alpine candidates → PHP built-in fallback)
- [x] Set SSL context options explicitly on socket before `stream_socket_enable_crypto()` for STARTTLS (both probe and send paths)
- [x] Add `sanitiseEnvelope()` — strips CR/LF from envelope addresses to prevent SMTP command injection
- [x] Fix RFC 5321 §4.5.2 dot-stuffing: replace `preg_replace` with correct CRLF-normalise → `str_replace("\r\n.", "\r\n..")` sequence
-
-## SMTP notify_email fix
-
- [x] Migration 006: add `notify_email` column to `smtp_settings`
- [x] `SmtpRelay::getSettings()` — include `notify_email` in SELECT + defaults
- [x] `SmtpRelay::updateSettings()` — persist `notify_email`
- [x] `SmtpRelay::getNotifyEmail()` — returns `notify_email` ?? `from_email`
- [x] `request-access.php` — use `getNotifyEmail()` instead of `from_email` for admin notifications
- [x] `actions/settings.php` — wire `smtp_notify_email` POST field
- [x] Template: add "Adresse de notification admin" field to SMTP form
- [x] `schema.sql` — updated DDL
-
-## SMTP credential validation
-
- [x] Add `SmtpProbeException` with `field` property for structured error classification
- [x] Add `SmtpRelay::test()` — returns `{ok, error, field}` with field = input id to highlight
- [x] `smtpProbe()` throws typed exceptions per failure point:
-  - connect fail → name resolution error → `smtp_host`
-  - connect fail → port refused → `smtp_port`
-  - connect fail → timeout → `smtp_host`
-  - bad greeting / timeout after connect → `smtp_host` / `smtp_port`
-  - STARTTLS not supported / TLS negotiation fail → `smtp_encryption`
-  - AUTH rejected, code 535 → `smtp_password`; other auth failures → `smtp_username`
- [x] `actions/settings.php`: store `$_SESSION['_flash_smtp_field']` on probe failure
- [x] `parametres.php` controller: consume + clear `_flash_smtp_field` into `$smtpErrorField`
- [x] Template: `aria-invalid`, `aria-describedby`, inline `<small class="param-field-error">` per field
- [x] JS: scroll + focus the offending field on page load
- [x] CSS: red `border-bottom` on `[aria-invalid]`, `.param-field-error` error text style
-
-## Répertoire layout
-
- [x] Make column headings sticky/non-scrollable; only `ul` scrolls per column
- [x] Remove padding from `.search-main` and `.repertoire-index`
- [x] Minimal horizontal padding inside columns (`var(--space-2xs)`)
- [x] Align all column headings to the same baseline row (2-row grid via `display: contents`)
-
-## SMTP 550 recipient-rejected handling
-
- [x] Add `SmtpSendException` — carries `smtpCode` + `smtpResponse`; `isRecipientRejected()` for 550–554
- [x] `smtpSend()` `$expect` closure throws `SmtpSendException` (with code) instead of plain `RuntimeException`
- [x] `SmtpRelay::send()` re-throws `SmtpSendException` so callers can react
- [x] `request-access.php` (new auto-approve): catch 550 → roll back token + approval, return HTTP 422 with user-facing message
- [x] `request-access.php` (resend path): catch 550 → return HTTP 422 instead of silent "access approved"
- [x] `StudentEmail::sendConfirmation()`: catch `SmtpSendException` → log + return false (submission must not be aborted)
- [x] `admin/actions/access-request.php`: catch `SmtpSendException` after approval → flash warning distinguishing recipient-rejected vs transient
- [x] `docs/SMTP_550_POSTFIX_FIX.md` — report for Postfix admin (diagnosis, 3 fix options, verification steps)
-
-## CSS refactor
-
- [x] Move semantic HTML element baseline styles into common.css
-  - `fieldset` (background, border, padding, radius)
-  - `legend` (font, weight, color, transform)
-  - `small` (size, color, display, margin)
-  - `table`, `th`, `td` (collapse, sizing, spacing)
-  - `dialog` + `::backdrop`
-  - `details > summary`
- [x] Remove duplicated rules from admin.css, form.css, system.css, file-access.css
- [x] Fix file-access.css to use real design tokens (was using undefined --border, --surface, --accent, etc.)
- [x] Remove redundant @import url("./variables.css") from admin.css, system.css, file-access.css
+## Previously completed
+- [x] Multi-file upload for thesis files (basic)
+- [x] File access restriction system (email approval workflow)
+- [x] Share link system for student submission
+- [x] Admin CRUD for theses
+- [x] Public TFE detail page with file display
+- [x] Search and repertoire
+- [x] Tag management
+- [x] Form help blocks
+- [x] SMTP notification
--- a/app/migrations/applied/007_thesis_files_sort_and_label.sql
+++ b/app/migrations/applied/007_thesis_files_sort_and_label.sql
@@ -0,0 +1,16 @@
+-- Migration 007: Add sort_order and display_label to thesis_files
+-- Also expand file type enum to cover audio and generic other types.
+
+ALTER TABLE thesis_files ADD COLUMN sort_order  INTEGER NOT NULL DEFAULT 0;
+ALTER TABLE thesis_files ADD COLUMN display_label TEXT;
+
+-- Back-fill sort_order from existing insertion order so ORDER BY sort_order
+-- is consistent with the old ORDER BY uploaded_at behaviour.
+UPDATE thesis_files SET sort_order = (
+    SELECT COUNT(*) FROM thesis_files tf2
+    WHERE tf2.thesis_id = thesis_files.thesis_id
+      AND (tf2.sort_order < thesis_files.sort_order
+           OR (tf2.sort_order = 0 AND tf2.uploaded_at < thesis_files.uploaded_at)
+           OR (tf2.sort_order = 0 AND tf2.uploaded_at = thesis_files.uploaded_at AND tf2.id < thesis_files.id))
+) + 1
+WHERE sort_order = 0;
--- a/app/public/.htaccess
+++ b/app/public/.htaccess
@@ -0,0 +1,17 @@
+# PHP upload limits for large thesis files (PDFs, video, audio)
+<IfModule mod_php.c>
+    php_value upload_max_filesize 512M
+    php_value post_max_size       520M
+    php_value memory_limit        256M
+    php_value max_execution_time  300
+</IfModule>
+# mod_php8 variant
+<IfModule mod_php8.c>
+    php_value upload_max_filesize 512M
+    php_value post_max_size       520M
+    php_value memory_limit        256M
+    php_value max_execution_time  300
+</IfModule>
+
+# Prevent directory listing
+Options -Indexes
--- a/app/public/.user.ini
+++ b/app/public/.user.ini
@@ -0,0 +1,6 @@
+; PHP upload limits — applies when served via PHP-FPM (nginx)
+upload_max_filesize = 512M
+post_max_size       = 520M
+memory_limit        = 256M
+max_execution_time  = 300
+max_input_time      = 300
--- a/app/public/admin/add.php
+++ b/app/public/admin/add.php
@@ -46,7 +46,7 @@ function wasSelected($key, $value) {
 $isAdmin = true;
 $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-preview.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/add.php';
--- a/app/public/admin/edit.php
+++ b/app/public/admin/edit.php
@@ -28,7 +28,7 @@ try {

 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-preview.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/edit.php';
--- a/app/public/assets/css/form.css
+++ b/app/public/assets/css/form.css
@@ -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;
--- a/app/public/assets/css/tfe.css
+++ b/app/public/assets/css/tfe.css
@@ -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;
--- a/app/public/assets/js/file-upload-queue.js
+++ b/app/public/assets/js/file-upload-queue.js
@@ -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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  /* ── 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();
+  }
+})();
--- a/app/public/partage/index.php
+++ b/app/public/partage/index.php
@@ -244,7 +244,8 @@ function renderShareLinkForm(string $slug, array $link): void
        <meta name="theme-color" content="#ffffff">
        <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
        <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
-        <script src="<?= App::assetV('/assets/js/file-preview.js') ?>" defer></script>
+        <script src="<?= App::assetV('/assets/js/sortable.min.js') ?>" defer></script>
+        <script src="<?= App::assetV('/assets/js/file-upload-queue.js') ?>" defer></script>
    </head>
    <body class="student-body">
        <main id="main-content">
--- a/app/src/Controllers/MediaController.php
+++ b/app/src/Controllers/MediaController.php
@@ -68,47 +68,128 @@ class MediaController
        $finfo    = new finfo(FILEINFO_MIME_TYPE);
        $mimeType = $finfo->file($realFull);

-        $allowedMimes = [
-            'image/jpeg',
-            'image/png',
-            'image/gif',
-            'application/pdf',
-            'video/mp4',
-            'application/zip',
-            'text/vtt',       // WebVTT caption sidecar files
-        ];
-
        // finfo may return 'text/plain' for WebVTT files on some systems;
        // re-classify by extension so we don't block them.
-        if ($mimeType === 'text/plain' && strtolower(pathinfo($realFull, PATHINFO_EXTENSION)) === 'vtt') {
+        $ext = strtolower(pathinfo($realFull, PATHINFO_EXTENSION));
+        if ($mimeType === 'text/plain' && $ext === 'vtt') {
            $mimeType = 'text/vtt';
        }
+        // finfo may return application/octet-stream for valid downloadable files
+        // that have known extensions — allow them through.
+        $knownDownloadExts = ['zip','tar','gz','tgz','mp3','ogg','oga','wav','flac','aac','m4a',
+                              'webm','ogv','mov','gif','webp','pdf','vtt'];

-        if (!in_array($mimeType, $allowedMimes, true)) {
+        $allowedMimes = [
+            // Images
+            'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+            // Documents
+            'application/pdf',
+            // Video
+            'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
+            // Audio
+            'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
+            'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
+            // Captions
+            'text/vtt',
+            // Archives
+            'application/zip', 'application/x-zip-compressed',
+            'application/x-tar', 'application/gzip',
+            // Generic binary (allowed when ext is known)
+            'application/octet-stream',
+        ];
+
+        $isAllowed = in_array($mimeType, $allowedMimes, true)
+                  || in_array($ext, $knownDownloadExts, true);
+
+        if (!$isAllowed) {
            http_response_code(403);
            exit;
        }

-        // 5. Send response headers
+        // 5. Determine if download was explicitly requested
+        $forceDownload = !empty($_GET['download']) && $_GET['download'] === '1';
+
+        // File types that should be displayed inline by default
+        $inlineExts = ['jpg','jpeg','png','gif','webp','pdf','mp4','webm','ogv','mov',
+                       'mp3','ogg','oga','wav','flac','aac','m4a','vtt'];
+        $inline = in_array($ext, $inlineExts, true) && !$forceDownload;
+
+        // 6. Send response headers
        header('Content-Type: ' . $mimeType);
        header('Content-Length: ' . filesize($realFull));
        header('X-Content-Type-Options: nosniff');

-        $ext = strtolower(pathinfo($realFull, PATHINFO_EXTENSION));
-
-        if (in_array($ext, ['jpg', 'jpeg', 'png', 'gif'], true)) {
-            header('Cache-Control: public, max-age=604800');
-        } elseif ($ext === 'pdf') {
-            header('Cache-Control: public, max-age=86400');
-            header('Content-Disposition: inline');
-        } elseif ($ext === 'vtt') {
+        if ($ext === 'vtt') {
            header('Content-Type: text/vtt; charset=utf-8');
            header('Cache-Control: public, max-age=86400');
+        } elseif (in_array($ext, ['jpg','jpeg','png','gif','webp'], true)) {
+            header('Cache-Control: public, max-age=604800');
+            if (!$forceDownload) header('Content-Disposition: inline');
+        } elseif ($ext === 'pdf') {
+            header('Cache-Control: public, max-age=86400');
+            header('Content-Disposition: ' . ($forceDownload ? 'attachment' : 'inline'));
+        } elseif (in_array($ext, ['mp4','webm','ogv','mov'], true)) {
+            // Video: no cache-control range requests should work
+            header('Accept-Ranges: bytes');
+            header('Cache-Control: public, max-age=86400');
+        } elseif (in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true)) {
+            header('Accept-Ranges: bytes');
+            header('Cache-Control: public, max-age=86400');
        } else {
+            // Unknown / other: force download
+            $safeFilename = preg_replace('/[^A-Za-z0-9._-]/', '_', basename($realFull));
+            header('Content-Disposition: attachment; filename="' . $safeFilename . '"');
            header('Cache-Control: private, no-store');
        }

-        // 6. Stream file
+        // 7. Stream file (with range support for media)
+        if (in_array($ext, ['mp4','webm','ogv','mov','mp3','ogg','oga','wav','flac','aac','m4a'], true)) {
+            $this->streamWithRange($realFull, $mimeType);
+        } else {
            readfile($realFull);
        }
    }
+
+    /**
+     * Stream a file with HTTP Range support (required for HTML5 audio/video seeking).
+     */
+    private function streamWithRange(string $path, string $mimeType): void
+    {
+        $size  = filesize($path);
+        $start = 0;
+        $end   = $size - 1;
+
+        if (isset($_SERVER['HTTP_RANGE'])) {
+            $range = $_SERVER['HTTP_RANGE'];
+            if (!preg_match('/bytes=\d*-\d*/', $range)) {
+                header('HTTP/1.1 416 Range Not Satisfiable');
+                header('Content-Range: bytes */' . $size);
+                exit;
+            }
+            [, $range] = explode('=', $range, 2);
+            [$start, $end] = array_pad(explode('-', $range, 2), 2, '');
+            $start = ($start === '') ? 0          : (int)$start;
+            $end   = ($end   === '') ? $size - 1  : (int)$end;
+            if ($end >= $size) $end = $size - 1;
+            if ($start > $end) { http_response_code(416); exit; }
+
+            header('HTTP/1.1 206 Partial Content');
+            header('Content-Range: bytes ' . $start . '-' . $end . '/' . $size);
+            header('Content-Length: ' . ($end - $start + 1));
+        } else {
+            header('Content-Length: ' . $size);
+        }
+
+        $fp = fopen($path, 'rb');
+        if ($fp === false) { http_response_code(500); exit; }
+        fseek($fp, $start);
+        $remaining = $end - $start + 1;
+        while ($remaining > 0 && !feof($fp)) {
+            $chunk = fread($fp, min(8192, $remaining));
+            if ($chunk === false) break;
+            echo $chunk;
+            $remaining -= strlen($chunk);
+        }
+        fclose($fp);
+    }
+}
--- a/app/src/Controllers/ThesisCreateController.php
+++ b/app/src/Controllers/ThesisCreateController.php
@@ -20,16 +20,42 @@
 class ThesisCreateController
 {
    /** Maximum allowed file size for thesis files (bytes). */
-    private const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50 MB
+    private const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB

    /** MIME types accepted for thesis files. */
    private const ALLOWED_MIME_TYPES = [
-        'image/jpeg', 'image/png', 'application/pdf',
-        'video/mp4', 'application/zip', 'text/vtt',
+        // Images
+        'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+        // Documents
+        'application/pdf',
+        // Video
+        'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
+        // Audio
+        'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
+        'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
+        // Captions
+        'text/vtt',
+        // Archives / other downloadables
+        'application/zip', 'application/x-zip-compressed',
+        'application/x-tar', 'application/gzip',
+        'application/octet-stream',
    ];

    /** File extensions accepted for thesis files. */
-    private const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'pdf', 'mp4', 'zip', 'vtt'];
+    private const ALLOWED_EXTENSIONS = [
+        // Images
+        'jpg', 'jpeg', 'png', 'gif', 'webp',
+        // Documents
+        'pdf',
+        // Video
+        'mp4', 'webm', 'ogv', 'mov',
+        // Audio
+        'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
+        // Captions
+        'vtt',
+        // Archives / other
+        'zip', 'tar', 'gz', 'tgz',
+    ];

    private Database $db;

@@ -159,7 +185,7 @@ class ThesisCreateController
        // ── 5. File uploads (outside transaction — filesystem ops) ────────────
        $this->handleCoverUpload($thesisId, $files['couverture'] ?? null);
        $this->db->handleBannerUpload($thesisId, $files['banner'] ?? null);
-        $this->handleThesisFiles($thesisId, $data['annee'], $identifier, $files['files'] ?? null, $data['auteurName']);
+        $this->handleThesisFiles($thesisId, $data['annee'], $identifier, $files['files'] ?? null, $data['auteurName'], $post);

        return $thesisId;
    }
@@ -370,7 +396,7 @@ class ThesisCreateController
     * @param array|null $uploads     Multi-file $_FILES entry (may be null).
     * @param string     $authorName  Author name for folder and file naming.
     */
-    private function handleThesisFiles(int $thesisId, int $year, string $identifier, ?array $uploads, string $authorName): void
+    private function handleThesisFiles(int $thesisId, int $year, string $identifier, ?array $uploads, string $authorName, array $post = []): void
    {
        if (!$uploads || !is_array($uploads['name'] ?? null)) {
            return;
@@ -385,6 +411,10 @@ class ThesisCreateController
            mkdir($uploadDir, 0755, true);
        }

+        // Per-file labels and sort orders submitted alongside the upload inputs
+        $fileLabels = $post['file_labels'] ?? [];
+        $fileOrders = $post['file_orders'] ?? [];
+
        $count = count($uploads['name']);
        for ($i = 0; $i < $count; $i++) {
            if (($uploads['error'][$i] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_NO_FILE) {
@@ -404,10 +434,15 @@ class ThesisCreateController
            if ($mimeType === 'text/plain' && $ext === 'vtt') {
                $mimeType = 'text/vtt';
            }
+            // application/octet-stream is a valid fallback for arbitrary downloadable files
+            if ($mimeType === 'application/octet-stream' && !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
+                error_log("ThesisCreateController: 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("ThesisCreateController: invalid file type {$uploads['name'][$i]} ($mimeType), skipping");
+                && !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
+                error_log("ThesisCreateController: invalid file type {$uploads['name'][$i]} ($mimeType / $ext), skipping");
                continue;
            }

@@ -437,14 +472,10 @@ class ThesisCreateController

            chmod($targetPath, 0644);

-            $fileType = 'other';
-            if ($ext === 'vtt') {
-                $fileType = 'caption';
-            } elseif (stripos($originalName, 'annex') !== false) {
-                $fileType = 'annex';
-            } elseif ($ext === 'pdf') {
-                $fileType = 'main';
-            }
+            $fileType = $this->detectFileType($mimeType, $ext, $originalName);
+
+            $label     = trim($fileLabels[$i] ?? '');
+            $sortOrder = isset($fileOrders[$i]) ? (int)$fileOrders[$i] : null;

            $relPath = "theses/{$year}/{$folderName}/" . $targetName;
            $this->db->insertThesisFile(
@@ -453,12 +484,27 @@ class ThesisCreateController
                $relPath,
                basename($originalName),
                $uploads['size'][$i],
-                $mimeType
+                $mimeType,
+                $label !== '' ? $label : null,
+                $sortOrder
            );
            error_log("ThesisCreateController: file uploaded → $targetName ($fileType)");
        }
    }

+    /**
+     * Determine the logical file_type from MIME type, extension, and original filename.
+     */
+    private function detectFileType(string $mimeType, string $ext, string $originalName): string
+    {
+        if ($ext === 'vtt' || $mimeType === 'text/vtt') return 'caption';
+        if (str_starts_with($mimeType, 'audio/') || in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true)) return 'audio';
+        if (str_starts_with($mimeType, 'video/') || in_array($ext, ['mp4','webm','ogv','mov'], true)) return 'video';
+        if ($mimeType === 'application/pdf' || $ext === 'pdf') return 'main';
+        if (str_starts_with($mimeType, 'image/') || in_array($ext, ['jpg','jpeg','png','gif','webp'], true)) return 'image';
+        return 'other';
+    }
+
    // ── Private: input helpers ────────────────────────────────────────────────

    /**
--- a/app/src/Controllers/ThesisEditController.php
+++ b/app/src/Controllers/ThesisEditController.php
@@ -275,6 +275,20 @@ class ThesisEditController
            }
        }

+        // ── Reorder existing files ────────────────────────────────────────────
+        if (!empty($post['file_sort_order']) && is_array($post['file_sort_order'])) {
+            $this->db->reorderThesisFiles($thesisId, $post['file_sort_order']);
+        }
+
+        // ── Update display labels for existing files ──────────────────────────
+        if (!empty($post['file_label']) && is_array($post['file_label'])) {
+            foreach ($post['file_label'] as $fileId => $label) {
+                $fileId = (int)$fileId;
+                if ($fileId <= 0) continue;
+                $this->db->updateThesisFileLabel($fileId, $thesisId, trim($label) ?: null);
+            }
+        }
+
        // ── New thesis files upload ───────────────────────────────────────────
        if (!empty($files['files']['name'][0])) {
            $this->handleThesisFiles($thesisId, $post, $files['files']);
@@ -293,16 +307,34 @@ class ThesisEditController
    private function handleThesisFiles(int $thesisId, array $post, array $uploads): void
    {
        $allowedMimes = [
-            'image/jpeg', 'image/png', 'application/pdf',
-            'video/mp4', 'application/zip', 'text/vtt',
+            'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+            'application/pdf',
+            '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', 'pdf', 'mp4', 'zip', 'vtt'];
-        $maxBytes    = 50 * 1024 * 1024; // 50 MB
+        $allowedExts = [
+            'jpg', 'jpeg', 'png', 'gif', 'webp',
+            'pdf',
+            'mp4', 'webm', 'ogv', 'mov',
+            'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
+            'vtt',
+            'zip', 'tar', 'gz', 'tgz',
+        ];
+        $maxBytes = 500 * 1024 * 1024; // 500 MB

        $year       = (int)($post['année'] ?? date('Y'));
        $authorName = trim($post['auteurice'] ?? 'unknown');
        $authorSlug = $this->generateAuthorSlug($authorName);

+        // Per-file labels and sort orders submitted alongside the upload inputs
+        $fileLabels = $post['file_labels'] ?? [];
+        $fileOrders = $post['file_orders'] ?? [];
+
        // Reuse existing folder if possible
        $existingFiles = $this->db->getThesisFiles($thesisId);
        $uploadDir  = null;
@@ -342,8 +374,9 @@ class ThesisEditController
                $mimeType = 'text/vtt';
            }

-            if (!in_array($mimeType, $allowedMimes, true) || !in_array($ext, $allowedExts, true)) {
-                error_log("ThesisEditController: invalid type {$uploads['name'][$i]} ($mimeType), skipping");
+            // Allow any ext-matched file even if finfo returns application/octet-stream
+            if (!in_array($mimeType, $allowedMimes, true) && !in_array($ext, $allowedExts, true)) {
+                error_log("ThesisEditController: invalid type {$uploads['name'][$i]} ($mimeType / $ext), skipping");
                continue;
            }

@@ -370,17 +403,34 @@ class ThesisEditController

            chmod($targetPath, 0644);

-            $fileType = 'other';
-            if ($ext === 'vtt')                                  $fileType = 'caption';
-            elseif (stripos($originalName, 'annex') !== false)  $fileType = 'annex';
-            elseif ($ext === 'pdf')                             $fileType = 'main';
+            $fileType  = $this->detectFileType($mimeType, $ext, $originalName);
+            $label     = trim($fileLabels[$i] ?? '');
+            $sortOrder = isset($fileOrders[$i]) ? (int)$fileOrders[$i] : null;

            $relPath = "theses/{$year}/{$folderName}/" . $candidate;
-            $this->db->insertThesisFile($thesisId, $fileType, $relPath, basename($originalName), $uploads['size'][$i], $mimeType);
+            $this->db->insertThesisFile(
+                $thesisId, $fileType, $relPath,
+                basename($originalName), $uploads['size'][$i], $mimeType,
+                $label !== '' ? $label : null,
+                $sortOrder
+            );
            error_log("ThesisEditController: uploaded → $candidate ($fileType)");
        }
    }

+    /**
+     * Determine the logical file_type from MIME type, extension, and original filename.
+     */
+    private function detectFileType(string $mimeType, string $ext, string $originalName): string
+    {
+        if ($ext === 'vtt' || $mimeType === 'text/vtt') return 'caption';
+        if (str_starts_with($mimeType, 'audio/') || in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true)) return 'audio';
+        if (str_starts_with($mimeType, 'video/') || in_array($ext, ['mp4','webm','ogv','mov'], true)) return 'video';
+        if ($mimeType === 'application/pdf' || $ext === 'pdf') return 'main';
+        if (str_starts_with($mimeType, 'image/') || in_array($ext, ['jpg','jpeg','png','gif','webp'], true)) return 'image';
+        return 'other';
+    }
+
    // ── Private: string helpers ───────────────────────────────────────────────

    private function generateAuthorSlug(string $authorName): string
--- a/app/src/Database.php
+++ b/app/src/Database.php
@@ -188,10 +188,11 @@ class Database {
    }

    /**
-     * Get files associated with a thesis
+     * Get files associated with a thesis, ordered by sort_order then upload time.
+     * Covers the new sort_order column added in migration 007.
     */
    public function getThesisFiles($thesisId) {
-        $sql = "SELECT * FROM thesis_files WHERE thesis_id = :thesis_id ORDER BY file_type, uploaded_at";
+        $sql = "SELECT * FROM thesis_files WHERE thesis_id = :thesis_id ORDER BY sort_order ASC, uploaded_at ASC";
        $stmt = $this->pdo->prepare($sql);
        $stmt->bindValue(':thesis_id', $thesisId, PDO::PARAM_INT);
        $stmt->execute();
@@ -1733,17 +1734,48 @@ class Database {
    }

    /**
-     * Insert a thesis file record
+     * Insert a thesis file record.
+     * sort_order defaults to (max existing sort_order + 1) for the thesis.
     */
-    public function insertThesisFile($thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType) {
+    public function insertThesisFile($thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType, ?string $displayLabel = null, ?int $sortOrder = null) {
+        if ($sortOrder === null) {
+            $maxStmt = $this->pdo->prepare(
+                "SELECT COALESCE(MAX(sort_order), 0) FROM thesis_files WHERE thesis_id = ?"
+            );
+            $maxStmt->execute([$thesisId]);
+            $sortOrder = (int)$maxStmt->fetchColumn() + 1;
+        }
        $stmt = $this->pdo->prepare("
-            INSERT INTO thesis_files (thesis_id, file_type, file_path, file_name, file_size, mime_type)
-            VALUES (?, ?, ?, ?, ?, ?)
+            INSERT INTO thesis_files (thesis_id, file_type, file_path, file_name, file_size, mime_type, display_label, sort_order)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?)
        ");
-        $stmt->execute([$thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType]);
+        $stmt->execute([$thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType, $displayLabel, $sortOrder]);
        return $this->pdo->lastInsertId();
    }

+    /**
+     * Persist a new sort order for thesis files.
+     * $order is an array of file IDs in the desired order.
+     * Only files belonging to $thesisId are updated (safety guard).
+     */
+    public function reorderThesisFiles(int $thesisId, array $order): void {
+        $stmt = $this->pdo->prepare(
+            "UPDATE thesis_files SET sort_order = ? WHERE id = ? AND thesis_id = ?"
+        );
+        foreach ($order as $i => $fileId) {
+            $stmt->execute([$i + 1, (int)$fileId, $thesisId]);
+        }
+    }
+
+    /**
+     * Update the display_label for a thesis file.
+     */
+    public function updateThesisFileLabel(int $fileId, int $thesisId, ?string $label): void {
+        $this->pdo->prepare(
+            "UPDATE thesis_files SET display_label = ? WHERE id = ? AND thesis_id = ?"
+        )->execute([$label ?: null, $fileId, $thesisId]);
+    }
+
    /**
     * Delete a single thesis file record by its ID and optionally remove the
     * file from disk.  Returns the file_path that was deleted (or null if not
--- a/app/templates/admin/edit.php
+++ b/app/templates/admin/edit.php
@@ -94,27 +94,56 @@
                    <?php endif; ?>
                    <input type="file" id="couverture" name="couverture" accept="image/jpeg,image/png" data-preview="fp-couverture">
                    <div id="fp-couverture" class="file-preview-list" aria-live="polite"></div>
-                    <small><?= empty($currentCover) ? 'JPG, PNG. Max 10 MB.' : 'Laisser vide pour conserver la couverture actuelle. JPG, PNG. Max 10 MB.' ?></small>
+                    <small><?= empty($currentCover) ? 'JPG, PNG. Max 20 MB.' : 'Laisser vide pour conserver la couverture actuelle. JPG, PNG. Max 20 MB.' ?></small>
                </div>
            </div>

-            <!-- Existing thesis files -->
-            <?php $thesisFilesList = array_filter($currentFiles, fn($f) => $f['file_type'] !== 'cover'); ?>
+            <!-- Existing thesis files — sortable, 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 class="admin-file-list">
-                    <?php foreach ($thesisFilesList as $f): ?>
-                    <li class="admin-file-list-item">
+                <small style="display:block;margin-bottom:var(--space-2xs);color:var(--text-tertiary)">
+                    Glissez-déposez les lignes pour réordonner les fichiers sur la page publique.
+                </small>
+                <ul id="existing-files-sortable" class="admin-file-list sortable-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'                      => '💬',
+                            default                                                        => '📎',
+                        };
+                    ?>
+                    <li class="admin-file-list-item" data-file-id="<?= (int)$f['id'] ?>">
+                        <!-- Hidden field carries sort order (updated by JS) -->
+                        <input type="hidden" name="file_sort_order[]" value="<?= (int)$f['id'] ?>">
+
+                        <span class="admin-file-drag-handle" title="Réordonner">⠿</span>
+
+                        <span class="admin-file-icon-col"><?= $fIcon ?></span>
+
                        <span class="admin-file-info">
-                            <span class="admin-file-type">[<?= htmlspecialchars($f['file_type']) ?>]</span>
-                            <a href="/media.php?path=<?= urlencode($f['file_path']) ?>" target="_blank" rel="noopener">
+                            <a href="/media.php?path=<?= urlencode($f['file_path']) ?>" 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'])): ?>
-                            <small>(<?= number_format($f['file_size'] / 1024 / 1024, 2) ?> MB)</small>
+                                <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
@@ -126,14 +155,18 @@
            <?php endif; ?>

            <!-- New thesis files -->
-            <div class="admin-form-group">
-                <label for="files">Ajouter des fichiers du TFE :</label>
+            <div class="admin-form-group admin-files-fieldgroup">
+                <label>Ajouter des fichiers du TFE :</label>
                <div class="admin-file-input">
-                    <input type="file" id="files" name="files[]" multiple
-                           accept=".pdf,.jpg,.jpeg,.png,.mp4,.zip,.vtt"
-                           data-preview="fp-files">
-                    <div id="fp-files" class="file-preview-list" aria-live="polite"></div>
-                    <small>PDF, JPG, PNG, MP4, ZIP. Max 50 MB par fichier. Pour les vidéos, un fichier .vtt de sous-titres peut être joint.</small>
+                    <input type="file" id="tfe-files-input"
+                           name="files[]" multiple
+                           accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.mov,.ogv,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.zip,.tar,.gz,.vtt"
+                           class="tfe-file-picker">
+                    <small class="admin-file-hint">
+                        Types acceptés : PDF · JPG/PNG/GIF/WEBP · MP4/WebM/MOV (vidéo) · MP3/OGG/WAV/FLAC (audio) · ZIP/TAR (archives) · autres fichiers (téléchargement uniquement). Max 500 MB par fichier.
+                    </small>
+                    <ul id="tfe-file-queue" class="tfe-file-queue sortable-list" aria-label="Nouveaux fichiers (réordonnable)"></ul>
+                    <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun nouveau fichier sélectionné.</p>
                </div>
            </div>

@@ -152,7 +185,7 @@
                    <?php endif; ?>
                    <input type="file" name="banner" id="banner" accept="image/jpeg,image/png,image/webp" data-preview="fp-banner">
                    <div id="fp-banner" class="file-preview-list" aria-live="polite"></div>
-                    <small><?= empty($thesis['banner_path']) ? 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.' : 'Laisser vide pour conserver la bannière actuelle. JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.' ?></small>
+                    <small><?= empty($thesis['banner_path']) ? 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 20 MB.' : 'Laisser vide pour conserver la bannière actuelle. JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 20 MB.' ?></small>
                </div>
            </div>
        </fieldset>
--- a/app/templates/partials/form/fieldset-files.php
+++ b/app/templates/partials/form/fieldset-files.php
@@ -2,9 +2,11 @@
 /**
 * Shared partial — "Fichiers" fieldset (add / student submission mode).
 *
- * This renders simple upload inputs with no existing-file management (that is
- * handled by the edit-specific template). For the edit form, include the
- * edit-specific files section directly in the template instead of this partial.
+ * Renders upload inputs for cover image, banner image, and TFE files.
+ * TFE files support multiple file types (PDF, image, audio, video, other),
+ * drag-to-reorder via SortableJS, and per-file label input.
+ *
+ * For the edit form, the existing-files management is inline in edit.php.
 *
 * Variables consumed: none beyond APP_ROOT (always available).
 */
@@ -12,7 +14,41 @@
 <fieldset>
    <legend>Fichiers</legend>

-    <?php $name = 'couverture'; $label = 'Image de couverture :'; $accept = 'image/jpeg,image/png'; $hint = 'JPG, PNG. Taille max : 10 MB.'; include APP_ROOT . '/templates/partials/form/file-field.php'; ?>
-    <?php $name = 'banner'; $label = 'Image bannière (accueil) :'; $accept = 'image/jpeg,image/png,image/webp'; $hint = 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.'; include APP_ROOT . '/templates/partials/form/file-field.php'; ?>
-    <?php $name = 'files'; $label = 'Fichiers du TFE :'; $accept = '.pdf,.jpg,.jpeg,.png,.mp4,.zip,.vtt'; $hint = 'PDF, JPG, PNG, MP4, ZIP. Max 50 MB par fichier. Pour les vidéos, un fichier .vtt de sous-titres peut être joint (il sera associé automatiquement à la vidéo correspondante).'; $multiple = true; include APP_ROOT . '/templates/partials/form/file-field.php'; ?>
+    <?php
+    $name = 'couverture';
+    $label = 'Image de couverture :';
+    $accept = 'image/jpeg,image/png';
+    $hint = 'JPG, PNG. Taille max : 20 MB.';
+    include APP_ROOT . '/templates/partials/form/file-field.php';
+    ?>
+
+    <?php
+    $name = 'banner';
+    $label = 'Image bannière (accueil) :';
+    $accept = 'image/jpeg,image/png,image/webp';
+    $hint = 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 20 MB.';
+    include APP_ROOT . '/templates/partials/form/file-field.php';
+    ?>
+
+    <!-- TFE files — multi-file, sortable, with per-file labels -->
+    <div class="admin-form-group admin-files-fieldgroup">
+        <label>Fichiers du TFE :</label>
+        <div class="admin-file-input">
+            <input type="file" id="tfe-files-input"
+                   name="files[]" multiple
+                   accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.mov,.ogv,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.zip,.tar,.gz,.vtt"
+                   class="tfe-file-picker">
+            <small class="admin-file-hint">
+                Types acceptés : PDF · JPG/PNG/GIF/WEBP · MP4/WebM/MOV (vidéo) · MP3/OGG/WAV/FLAC (audio) · ZIP/TAR (archives) · autres fichiers (téléchargement uniquement).
+                Max 500 MB par fichier.
+                Les fichiers <code>.vtt</code> sont des sous-titres et seront associés automatiquement à la vidéo précédente.
+            </small>
+
+            <!-- Sortable file queue — populated by JS -->
+            <ul id="tfe-file-queue" class="tfe-file-queue sortable-list" aria-label="Fichiers sélectionnés (réordonnable)">
+                <!-- Items injected by file-upload-queue.js -->
+            </ul>
+            <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+        </div>
+    </div>
 </fieldset>
--- a/app/templates/public/tfe.php
+++ b/app/templates/public/tfe.php
@@ -371,80 +371,78 @@
            <?php elseif (!empty($data["files"])): ?>
                <?php foreach ($data["files"] as $file): ?>
                    <?php
-                    $ext = strtolower(
-                        pathinfo($file["file_path"], PATHINFO_EXTENSION),
-                    );
-                    $fileType = $file["file_type"] ?? "";
-                    if ($ext === "vtt") {
-                        continue;
-                    }
-                    if ($fileType === "cover") {
-                        continue;
-                    }
-                    ?>
-                    <figure>
-                        <?php if ($ext === "pdf"): ?>
-                            <iframe src="/media?path=<?= urlencode(
-                                $file["file_path"],
-                            ) ?>"
-                                    width="100%" height="700px"
-                                    style="border:none"
-                                    title="<?= htmlspecialchars(
-                                        $file["original_name"] ??
-                                            basename($file["file_path"]),
-                                    ) ?>">
-                            </iframe>
-                            <p class="tfe-pdf-fallback">
-                                <a href="/media?path=<?= urlencode(
-                                    $file["file_path"],
-                                ) ?>&download=1">
-                                    Télécharger le PDF
-                                </a>
-                            </p>
-                        <?php elseif (
-                            in_array($ext, [
-                                "jpg",
-                                "jpeg",
-                                "png",
-                                "gif",
-                                "bmp",
-                                "webp",
-                            ])
-                        ): ?>
-                            <img src="/media?path=<?= urlencode(
-                                $file["file_path"],
-                            ) ?>"
-                                 alt="<?= htmlspecialchars(
-                                     !empty($file["description"])
-                                         ? $file["description"]
-                                         : $data["title"] .
-                                             " — " .
-                                             ($data["authors"] ?? ""),
-                                 ) ?>">
-                        <?php elseif ($ext === "mp4"): ?>
-                            <?php
+                    $ext      = strtolower(pathinfo($file["file_path"] ?? '', PATHINFO_EXTENSION));
+                    $fileType = $file["file_type"] ?? '';
+
+                    // Skip helper/internal types
+                    if ($ext === 'vtt' || $fileType === 'caption') continue;
+                    if ($fileType === 'cover') continue;
+
+                    // Determine display category
+                    $isImage = in_array($ext, ['jpg','jpeg','png','gif','bmp','webp'], true) || $fileType === 'image';
+                    $isVideo = in_array($ext, ['mp4','webm','mov','ogv'], true)              || $fileType === 'video';
+                    $isAudio = in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true) || $fileType === 'audio';
+                    $isPdf   = ($ext === 'pdf') || $fileType === 'main';
+                    $isOther = !($isImage || $isVideo || $isAudio || $isPdf);
+
+                    $_vttPath = null;
+                    if ($isVideo) {
                        $_vttPath = $captionFiles[$_videoIndex] ?? null;
                        $_videoIndex++;
+                    }
+
+                    $caption  = !empty($file["display_label"]) ? $file["display_label"] : ($file["description"] ?? '');
+                    $mediaUrl = '/media?path=' . urlencode($file["file_path"]);
+                    $fileName = htmlspecialchars($file["file_name"] ?? basename($file["file_path"]));
                    ?>
+                    <figure>
+                        <?php if ($isPdf): ?>
+                            <iframe src="<?= $mediaUrl ?>"
+                                    width="100%" height="700px"
+                                    style="border:none"
+                                    title="<?= $fileName ?>">
+                            </iframe>
+                            <p class="tfe-pdf-fallback">
+                                <a href="<?= $mediaUrl ?>&download=1">Télécharger le PDF</a>
+                            </p>
+                        <?php elseif ($isImage): ?>
+                            <img src="<?= $mediaUrl ?>"
+                                 alt="<?= htmlspecialchars($caption !== '' ? $caption : $data['title'] . ' — ' . ($data['authors'] ?? '')) ?>">
+                        <?php elseif ($isVideo): ?>
                            <video width="100%" controls>
-                                <source src="/media?path=<?= urlencode(
-                                    $file["file_path"],
-                                ) ?>" type="video/mp4">
+                                <source src="<?= $mediaUrl ?>" type="video/<?= htmlspecialchars($ext === 'mov' ? 'mp4' : $ext) ?>">
                                <?php if ($_vttPath): ?>
                                <track kind="captions"
-                                       src="/media?path=<?= urlencode(
-                                           $_vttPath,
-                                       ) ?>"
-                                       srclang="fr"
-                                       label="Sous-titres"
-                                       default>
+                                       src="/media?path=<?= urlencode($_vttPath) ?>"
+                                       srclang="fr" label="Sous-titres" default>
                                <?php endif; ?>
                            </video>
+                        <?php elseif ($isAudio): ?>
+                            <audio controls class="tfe-audio">
+                                <source src="<?= $mediaUrl ?>" type="audio/<?= htmlspecialchars(match($ext) {
+                                    'mp3'        => 'mpeg',
+                                    'ogg', 'oga' => 'ogg',
+                                    'wav'        => 'wav',
+                                    'flac'       => 'flac',
+                                    'aac'        => 'aac',
+                                    'm4a'        => 'mp4',
+                                    default      => $ext,
+                                }) ?>">
+                                Votre navigateur ne supporte pas la lecture audio.
+                            </audio>
+                        <?php else: /* other — download only */ ?>
+                            <div class="tfe-download-file">
+                                <a href="<?= $mediaUrl ?>&download=1" class="tfe-download-link">
+                                    <span class="tfe-download-icon">📎</span>
+                                    <span><?= $fileName ?></span>
+                                </a>
+                                <?php if (!empty($file['file_size'])): ?>
+                                <small class="tfe-download-size"><?= number_format($file['file_size'] / 1024 / 1024, 2) ?> MB</small>
                                <?php endif; ?>
-                        <?php if (!empty($file["description"])): ?>
-                            <figcaption><?= htmlspecialchars(
-                                $file["description"],
-                            ) ?></figcaption>
+                            </div>
+                        <?php endif; ?>
+                        <?php if ($caption !== '' && !$isOther): ?>
+                            <figcaption><?= htmlspecialchars($caption) ?></figcaption>
                        <?php endif; ?>
                    </figure>
                <?php endforeach; ?>