feat: Phase 2.1 + 2.2 — Mobile-Upload mit QR-Code

Phase 2.1 Token-System: - Neue Tabelle llx_bericht_upload_token (token, fk_bericht, expires_at, uploads_count, max_uploads) - BerichtUploadToken-Klasse mit create/fetchValid/incrementCount/cleanupExpired - Cronjob 'Bericht: Expired Upload-Tokens bereinigen' täglich - 64-Hex random_bytes-Tokens, 1h Lifetime, 100 Uploads max Phase 2.2 QR-Upload Lite: - mobile_upload.php — Mobile-optimierte Page ohne Dolibarr-Login, Auth nur über Token in URL/Form - 📷 Foto aufnehmen (capture=environment) und 📂 Galerie - Clientseitiges Resize auf max 2000px (Canvas, JPEG q=0.85) - Upload-Status mit Toast-Notifications - Liste der hochgeladenen Bilder live in der Page - ajax/create_upload_token.php — generiert Token für aktiven Bericht - ajax/list_pages.php — Polling-Endpoint für Editor - 📱 Mobil hochladen-Button im Editor → QR-Modal mit qrcodejs - Polling alle 5s nach neuen Pages, auto-reload bei Änderung - QR-Modal styled für Dark-Theme Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> [deploy]
2026-04-08 22:38:33 +02:00 · 2026-04-08 22:38:33 +02:00 · 3d84f7e0be
commit 3d84f7e0be
parent 06cd70d4a3
11 changed files with 636 additions and 14 deletions
--- a/ajax/create_upload_token.php
+++ b/ajax/create_upload_token.php
@ -0,0 +1,30 @@
+<?php
+/* Erstellt einen Upload-Token für einen Bericht.
+ * POST: berichtid, token (Dolibarr CSRF)
+ * Liefert: { token, expires_at, url }
+ */
+require_once __DIR__.'/_inc.php';
+require_once __DIR__.'/../class/upload_token.class.php';
+
+global $db, $user;
+if (!$user->hasRight('bericht', 'write')) bericht_ajax_fail('Permission denied', 403);
+
+$berichtid = (int) ($_POST['berichtid'] ?? 0);
+if (!$berichtid) bericht_ajax_fail('berichtid fehlt');
+
+$bericht = new Bericht($db);
+if ($bericht->fetch($berichtid) <= 0) bericht_ajax_fail('Bericht nicht gefunden', 404);
+
+$tok = new BerichtUploadToken($db);
+$hex = $tok->create($berichtid, $user->id);
+if (!$hex) bericht_ajax_fail('Token-Erstellung fehlgeschlagen');
+
+$base = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' ? 'https://' : 'http://').$_SERVER['HTTP_HOST'];
+$url = $base.dol_buildpath('/bericht/mobile_upload.php', 1).'?token='.$hex;
+
+bericht_ajax_ok(array(
+    'token' => $hex,
+    'expires_at' => $tok->expires_at,
+    'expires_in_min' => round(($tok->expires_at - dol_now()) / 60),
+    'url' => $url,
+));
--- a/ajax/list_pages.php
+++ b/ajax/list_pages.php
@ -0,0 +1,23 @@
+<?php
+/* Liefert die aktuelle Liste der Seiten eines Berichts (für Polling vom QR-Upload).
+ * GET: berichtid
+ */
+require_once __DIR__.'/_inc.php';
+
+global $db, $user;
+if (!$user->hasRight('bericht', 'read')) bericht_ajax_fail('Permission denied', 403);
+
+$berichtid = (int) (GETPOSTINT('berichtid'));
+if (!$berichtid) bericht_ajax_fail('berichtid fehlt');
+
+$pages = BerichtPage::fetchAllForBericht($db, $berichtid);
+$out = array();
+foreach ($pages as $p) {
+    $out[] = array(
+        'id'         => (int) $p->id,
+        'page_order' => (int) $p->page_order,
+        'source_type'=> $p->source_type,
+        'layout'     => $p->layout,
+    );
+}
+bericht_ajax_ok(array('pages' => $out, 'count' => count($out)));
--- a/bericht_card.php
+++ b/bericht_card.php
@ -265,6 +265,8 @@ if (!$bericht) {
            'save_page_options'=> dol_buildpath('/bericht/ajax/save_page_options.php', 1),
            'create_grid_page' => dol_buildpath('/bericht/ajax/create_grid_page.php', 1),
            'set_slot_image'   => dol_buildpath('/bericht/ajax/set_slot_image.php', 1),
+            'create_upload_token' => dol_buildpath('/bericht/ajax/create_upload_token.php', 1),
+            'list_pages'       => dol_buildpath('/bericht/ajax/list_pages.php', 1),
        ),
        'lang' => array(
            'undo'        => $langs->trans("BerichtUndo"),
@ -364,8 +366,9 @@ if (!$bericht) {
    }
    print '<hr>';
    print '<div class="bericht-upload">';
-    print '<label for="bericht-extra-upload" class="butAction">📤 '.$langs->trans("BerichtUploadExtra").'</label>';
+    print '<label for="bericht-extra-upload" class="butAction" title="Datei vom PC hochladen">📤 '.$langs->trans("BerichtUploadExtra").'</label>';
    print '<input type="file" id="bericht-extra-upload" style="display:none" accept=".pdf,.png,.jpg,.jpeg">';
+    print '<button type="button" id="btn-show-qr" class="butAction" title="QR-Code für Mobile-Upload erzeugen" style="margin-top:6px;">📱 Mobil hochladen</button>';
    print '</div>';
    print '</aside>';

@ -496,10 +499,31 @@ if (!$bericht) {
    print '  </div>';
    print '</div>';

+    // QR-Code-Modal für Mobile-Upload
+    print '<div id="bericht-qr-modal" class="bericht-modal" style="display:none;">';
+    print '  <div class="bericht-modal-backdrop"></div>';
+    print '  <div class="bericht-modal-content qr-modal">';
+    print '    <div class="bericht-modal-header">';
+    print '      <h3>📱 Mobile-Upload</h3>';
+    print '      <button type="button" id="bericht-qr-close" title="Schließen">✕</button>';
+    print '    </div>';
+    print '    <div class="bericht-modal-body qr-modal-body">';
+    print '      <div id="qr-code-container"></div>';
+    print '      <div class="qr-info">';
+    print '        <p>Scanne den QR-Code mit deinem Handy, um direkt Fotos in diesen Bericht hochzuladen.</p>';
+    print '        <p class="opacitymedium small">Token gültig: <span id="qr-validity">—</span> Min</p>';
+    print '        <p class="qr-url-display"><a id="qr-url-link" href="" target="_blank">Link öffnen</a></p>';
+    print '        <p class="qr-status opacitymedium small">Warte auf Uploads…</p>';
+    print '      </div>';
+    print '    </div>';
+    print '  </div>';
+    print '</div>';
+
    // PDF.js + Fabric.js (lokal)
    print '<script src="'.dol_buildpath('/bericht/js/lib/pdf.min.js', 1).'"></script>';
    print '<script src="'.dol_buildpath('/bericht/js/lib/fabric.min.js', 1).'"></script>';
    print '<script src="'.dol_buildpath('/bericht/js/lib/Sortable.min.js', 1).'"></script>';
+    print '<script src="'.dol_buildpath('/bericht/js/lib/qrcode.min.js', 1).'"></script>';
    print '<script>window.BERICHT_CONFIG = '.json_encode($editor_config).';</script>';
    print '<script src="'.dol_buildpath('/bericht/js/editor.js', 1).'"></script>';
 }
--- a/class/upload_token.class.php
+++ b/class/upload_token.class.php
@ -0,0 +1,98 @@
+<?php
+/* Upload-Token für Mobile-Upload eines Berichts.
+ * Token = 64 Hex-Zeichen, gültig 1h, max 100 Uploads.
+ */
+
+class BerichtUploadToken
+{
+    public $db;
+    public $id;
+    public $token;
+    public $fk_bericht;
+    public $fk_user_creat;
+    public $expires_at;
+    public $uploads_count = 0;
+    public $max_uploads = 100;
+    public $datec;
+
+    const DEFAULT_LIFETIME = 3600; // 1h
+    const DEFAULT_MAX_UPLOADS = 100;
+
+    public function __construct(DoliDB $db)
+    {
+        $this->db = $db;
+    }
+
+    /**
+     * Erstellt einen neuen Token für einen Bericht.
+     * @return string|false  Hex-Token bei Erfolg
+     */
+    public function create($fk_bericht, $fk_user, $lifetime = null, $max_uploads = null)
+    {
+        $this->token        = bin2hex(random_bytes(32));
+        $this->fk_bericht   = (int) $fk_bericht;
+        $this->fk_user_creat = (int) $fk_user;
+        $this->datec        = dol_now();
+        $this->expires_at   = $this->datec + ($lifetime ?: self::DEFAULT_LIFETIME);
+        $this->max_uploads  = $max_uploads ?: self::DEFAULT_MAX_UPLOADS;
+        $this->uploads_count = 0;
+
+        $sql = "INSERT INTO ".$this->db->prefix()."bericht_upload_token "
+            ."(token, fk_bericht, fk_user_creat, expires_at, uploads_count, max_uploads, datec) VALUES ("
+            ."'".$this->db->escape($this->token)."',"
+            .$this->fk_bericht.","
+            .$this->fk_user_creat.","
+            ."'".$this->db->idate($this->expires_at)."',"
+            ."0,"
+            .$this->max_uploads.","
+            ."'".$this->db->idate($this->datec)."'"
+            .")";
+        if (!$this->db->query($sql)) return false;
+        $this->id = $this->db->last_insert_id($this->db->prefix()."bericht_upload_token");
+        return $this->token;
+    }
+
+    /**
+     * Lädt einen Token und prüft Gültigkeit.
+     * @return BerichtUploadToken|null
+     */
+    public static function fetchValid(DoliDB $db, $token)
+    {
+        if (!preg_match('/^[a-f0-9]{64}$/', $token)) return null;
+        $sql = "SELECT rowid, token, fk_bericht, fk_user_creat, expires_at, uploads_count, max_uploads, datec"
+            ." FROM ".$db->prefix()."bericht_upload_token"
+            ." WHERE token = '".$db->escape($token)."'"
+            ." AND expires_at > '".$db->idate(dol_now())."'"
+            ." AND uploads_count < max_uploads";
+        $res = $db->query($sql);
+        if (!$res || $db->num_rows($res) === 0) return null;
+        $obj = $db->fetch_object($res);
+        $t = new self($db);
+        $t->id = (int) $obj->rowid;
+        $t->token = $obj->token;
+        $t->fk_bericht = (int) $obj->fk_bericht;
+        $t->fk_user_creat = (int) $obj->fk_user_creat;
+        $t->expires_at = $db->jdate($obj->expires_at);
+        $t->uploads_count = (int) $obj->uploads_count;
+        $t->max_uploads = (int) $obj->max_uploads;
+        $t->datec = $db->jdate($obj->datec);
+        return $t;
+    }
+
+    public function incrementCount()
+    {
+        $this->uploads_count++;
+        return $this->db->query("UPDATE ".$this->db->prefix()."bericht_upload_token"
+            ." SET uploads_count = uploads_count + 1"
+            ." WHERE rowid = ".((int) $this->id));
+    }
+
+    /**
+     * Räumt expired Tokens auf.
+     */
+    public static function cleanupExpired(DoliDB $db)
+    {
+        $db->query("DELETE FROM ".$db->prefix()."bericht_upload_token"
+            ." WHERE expires_at < '".$db->idate(dol_now())."'");
+    }
+}
--- a/core/modules/modBericht.class.php
+++ b/core/modules/modBericht.class.php
@ -89,7 +89,23 @@ class modBericht extends DolibarrModules

        $this->dictionaries = array();
        $this->boxes = array();
-        $this->cronjobs = array();
+        // Cleanup expired Mobile-Upload-Tokens (täglich um 03:30)
+        $this->cronjobs = array(
+            0 => array(
+                'label' => 'Bericht: Expired Upload-Tokens bereinigen',
+                'jobtype' => 'method',
+                'class' => '/bericht/class/upload_token.class.php',
+                'objectname' => 'BerichtUploadToken',
+                'method' => 'cleanupExpired',
+                'parameters' => '',
+                'comment' => 'Löscht abgelaufene Mobile-Upload-Tokens aus llx_bericht_upload_token',
+                'frequency' => 1,
+                'unitfrequency' => 86400,
+                'status' => 1,
+                'test' => 'isModEnabled("bericht")',
+                'priority' => 50,
+            ),
+        );

        // Rechte — wie Stundenzettel: [4]=perms, [5]=subperms (leer)
        $this->rights = array();
--- a/css/bericht.css
+++ b/css/bericht.css
@ -364,3 +364,22 @@
    border: none;
    background: #444;
 }
+
+.qr-modal {
+    top: 10vh; left: 50%; right: auto; bottom: auto;
+    transform: translateX(-50%);
+    width: 380px; max-width: 90vw;
+    height: auto; max-height: 80vh;
+}
+.qr-modal-body { padding: 20px; text-align: center; }
+#qr-code-container {
+    display: inline-block;
+    background: #fff;
+    padding: 12px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+}
+.qr-info p { margin: 6px 0; font-size: 13px; color: var(--colortext, #ddd); }
+.qr-url-display { word-break: break-all; }
+.qr-url-display a { color: var(--colortextlink, #7aa2f7); }
+.qr-status { padding: 8px; background: var(--colorbackbody, #1a1a1f); border-radius: 4px; margin-top: 12px; }
--- a/js/editor.js
+++ b/js/editor.js
@ -751,18 +751,85 @@

    function bindExtraUpload() {
        const inp = document.getElementById('bericht-extra-upload');
-        if (!inp) return;
-        inp.addEventListener('change', async () => {
-            if (!inp.files.length) return;
-            const fd = new FormData();
-            fd.append('token', cfg.token);
-            fd.append('berichtid', cfg.berichtid);
-            fd.append('file', inp.files[0]);
-            const r = await fetch(cfg.urls.upload_extra, { method: 'POST', body: fd });
-            const data = await r.json();
-            if (data.success) location.reload();
-            else alert('Upload fehlgeschlagen: ' + (data.error || ''));
-        });
+        if (inp) {
+            inp.addEventListener('change', async () => {
+                if (!inp.files.length) return;
+                const fd = new FormData();
+                fd.append('token', cfg.token);
+                fd.append('berichtid', cfg.berichtid);
+                fd.append('file', inp.files[0]);
+                const r = await fetch(cfg.urls.upload_extra, { method: 'POST', body: fd });
+                const data = await r.json();
+                if (data.success) location.reload();
+                else alert('Upload fehlgeschlagen: ' + (data.error || ''));
+            });
+        }
+
+        // QR-Modal für Mobile-Upload
+        const qrBtn = document.getElementById('btn-show-qr');
+        if (qrBtn) qrBtn.addEventListener('click', openQrModal);
+        const qrClose = document.getElementById('bericht-qr-close');
+        if (qrClose) qrClose.addEventListener('click', closeQrModal);
+        document.querySelector('#bericht-qr-modal .bericht-modal-backdrop')
+            ?.addEventListener('click', closeQrModal);
+    }
+
+    let qrPollInterval = null;
+    let qrLastPageCount = null;
+
+    async function openQrModal() {
+        const fd = new FormData();
+        fd.append('token', cfg.token);
+        fd.append('berichtid', cfg.berichtid);
+        const r = await fetch(cfg.urls.create_upload_token, { method: 'POST', body: fd });
+        const data = await r.json();
+        if (!data.success) {
+            alert('Token-Erstellung fehlgeschlagen: ' + (data.error || ''));
+            return;
+        }
+        const url = data.url;
+        const qrContainer = document.getElementById('qr-code-container');
+        qrContainer.innerHTML = '';
+        if (typeof QRCode !== 'undefined') {
+            new QRCode(qrContainer, {
+                text: url,
+                width: 280,
+                height: 280,
+                colorDark: '#000',
+                colorLight: '#fff',
+                correctLevel: QRCode.CorrectLevel.M,
+            });
+        } else {
+            qrContainer.textContent = url;
+        }
+        document.getElementById('qr-validity').textContent = data.expires_in_min;
+        const linkEl = document.getElementById('qr-url-link');
+        linkEl.href = url;
+        linkEl.textContent = url.length > 60 ? url.substring(0, 57) + '...' : url;
+
+        document.getElementById('bericht-qr-modal').style.display = 'block';
+
+        // Polling alle 5 Sek nach neuen Pages
+        qrLastPageCount = document.querySelectorAll('.page-thumb').length;
+        if (qrPollInterval) clearInterval(qrPollInterval);
+        qrPollInterval = setInterval(async () => {
+            try {
+                const r = await fetch(cfg.urls.list_pages + '?berichtid=' + cfg.berichtid);
+                const d = await r.json();
+                if (d.success && d.count !== qrLastPageCount) {
+                    document.querySelector('.qr-status').textContent =
+                        '✓ ' + (d.count - qrLastPageCount) + ' neue(s) Foto(s) hochgeladen — Seite wird neu geladen…';
+                    setTimeout(() => location.reload(), 1500);
+                    clearInterval(qrPollInterval);
+                }
+            } catch (e) {}
+        }, 5000);
+    }
+
+    function closeQrModal() {
+        const m = document.getElementById('bericht-qr-modal');
+        if (m) m.style.display = 'none';
+        if (qrPollInterval) { clearInterval(qrPollInterval); qrPollInterval = null; }
    }

    function bindThumbs() {
--- a/js/lib/qrcode.min.js
+++ b/js/lib/qrcode.min.js
--- a/mobile_upload.php
+++ b/mobile_upload.php
@ -0,0 +1,329 @@
+<?php
+/* Mobile-Upload-Page für Bericht.
+ * KEIN Dolibarr-Login nötig — Authentifizierung über Token in der URL.
+ *
+ * GET: token
+ * POST: token, file (multipart)
+ */
+
+if (!defined('NOLOGIN'))     define('NOLOGIN', '1');
+if (!defined('NOCSRFCHECK')) define('NOCSRFCHECK', '1');
+if (!defined('NOTOKENRENEWAL')) define('NOTOKENRENEWAL', '1');
+if (!defined('NOREQUIREMENU'))  define('NOREQUIREMENU', '1');
+if (!defined('NOREQUIREHTML'))  define('NOREQUIREHTML', '1');
+if (!defined('NOREQUIREAJAX'))  define('NOREQUIREAJAX', '1');
+
+$res = 0;
+if (!$res && !empty($_SERVER["CONTEXT_DOCUMENT_ROOT"])) $res = @include $_SERVER["CONTEXT_DOCUMENT_ROOT"]."/main.inc.php";
+$tmp = empty($_SERVER['SCRIPT_FILENAME']) ? '' : $_SERVER['SCRIPT_FILENAME']; $tmp2 = realpath(__FILE__); $i = strlen($tmp) - 1; $j = strlen($tmp2) - 1;
+while ($i > 0 && $j > 0 && isset($tmp[$i]) && isset($tmp2[$j]) && $tmp[$i] == $tmp2[$j]) { $i--; $j--; }
+if (!$res && $i > 0 && file_exists(substr($tmp, 0, ($i + 1))."/main.inc.php")) $res = @include substr($tmp, 0, ($i + 1))."/main.inc.php";
+if (!$res && $i > 0 && file_exists(dirname(substr($tmp, 0, ($i + 1)))."/main.inc.php")) $res = @include dirname(substr($tmp, 0, ($i + 1)))."/main.inc.php";
+if (!$res && file_exists("../main.inc.php")) $res = @include "../main.inc.php";
+if (!$res && file_exists("../../main.inc.php")) $res = @include "../../main.inc.php";
+if (!$res) die("Include of main fails");
+
+require_once DOL_DOCUMENT_ROOT.'/core/lib/files.lib.php';
+require_once __DIR__.'/class/bericht.class.php';
+require_once __DIR__.'/class/upload_token.class.php';
+
+$token = (string) ($_REQUEST['token'] ?? '');
+$tok = BerichtUploadToken::fetchValid($db, $token);
+
+// POST = Datei-Upload
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_FILES['file']['tmp_name'])) {
+    header('Content-Type: application/json; charset=utf-8');
+    if (!$tok) {
+        http_response_code(403);
+        echo json_encode(array('success' => false, 'error' => 'Token ungültig oder abgelaufen'));
+        exit;
+    }
+
+    $bericht = new Bericht($db);
+    if ($bericht->fetch($tok->fk_bericht) <= 0) {
+        http_response_code(404);
+        echo json_encode(array('success' => false, 'error' => 'Bericht nicht gefunden'));
+        exit;
+    }
+
+    $orig = dol_sanitizeFileName($_FILES['file']['name']);
+    $ext = strtolower(pathinfo($orig, PATHINFO_EXTENSION));
+    $allowed = array('jpg', 'jpeg', 'png');
+    if (!in_array($ext, $allowed)) {
+        echo json_encode(array('success' => false, 'error' => 'Nur JPG/PNG erlaubt'));
+        exit;
+    }
+
+    $workdir = DOL_DATA_ROOT.'/bericht/work/'.$tok->fk_bericht;
+    if (!is_dir($workdir)) dol_mkdir($workdir);
+
+    $target = $workdir.'/mobile_'.dol_print_date(dol_now(), '%Y%m%d_%H%M%S').'_'.uniqid().'.'.$ext;
+    if (!move_uploaded_file($_FILES['file']['tmp_name'], $target)) {
+        echo json_encode(array('success' => false, 'error' => 'Upload fehlgeschlagen'));
+        exit;
+    }
+    $relpath = str_replace(DOL_DATA_ROOT.'/', '', $target);
+
+    // Als neue Bericht-Page einfügen
+    $res = $db->query("SELECT COALESCE(MAX(page_order),0) AS m FROM ".$db->prefix()."bericht_page WHERE fk_bericht = ".((int) $tok->fk_bericht));
+    $next_order = ($res && ($o = $db->fetch_object($res))) ? ((int) $o->m) + 1 : 1;
+
+    $page = new BerichtPage($db);
+    $page->fk_bericht  = $tok->fk_bericht;
+    $page->page_order  = $next_order;
+    $page->source_type = 'upload';
+    $page->source_path = $relpath;
+    if ($page->create() <= 0) {
+        echo json_encode(array('success' => false, 'error' => 'DB-Insert fehlgeschlagen'));
+        exit;
+    }
+
+    $tok->incrementCount();
+    echo json_encode(array('success' => true, 'pageid' => $page->id, 'filename' => basename($target)));
+    exit;
+}
+
+// GET = Mobile-Upload-Seite anzeigen
+if (!$tok) {
+    http_response_code(403);
+    ?>
+    <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Bericht — Token ungültig</title>
+    <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background:#1a1a1f; color:#fff; padding: 40px 20px; text-align:center; }
+    h1 { color: #d9534f; }
+    </style>
+    </head><body>
+    <h1>⚠️ Token ungültig</h1>
+    <p>Dieser Upload-Link ist abgelaufen oder ungültig.</p>
+    <p>Bitte im Bericht-Editor einen neuen QR-Code generieren.</p>
+    </body></html>
+    <?php
+    exit;
+}
+
+// Bericht-Daten für die Anzeige
+$bericht = new Bericht($db);
+$bericht->fetch($tok->fk_bericht);
+$auftragsnr = $bericht->auftragsnummer ?: $bericht->ref;
+$valid_min = max(1, round(($tok->expires_at - dol_now()) / 60));
+
+?>
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+<meta name="theme-color" content="#1a1a1f">
+<title>Bericht Upload — <?php print htmlspecialchars($auftragsnr); ?></title>
+<style>
+* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background: #1a1a1f;
+    color: #f0f0f0;
+    margin: 0;
+    padding: 16px;
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+}
+.header {
+    text-align: center;
+    padding: 16px 0 24px;
+    border-bottom: 1px solid #333;
+}
+.header h1 { margin: 0 0 4px; font-size: 18px; color: #f0f0f0; }
+.header .ref { color: #7aa2f7; font-size: 14px; }
+.header .info { font-size: 11px; opacity: 0.6; margin-top: 8px; }
+
+.action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 24px 0;
+}
+.btn {
+    display: block;
+    width: 100%;
+    padding: 18px 24px;
+    font-size: 17px;
+    font-weight: 600;
+    border-radius: 12px;
+    border: none;
+    cursor: pointer;
+    background: #337ab7;
+    color: #fff;
+    text-align: center;
+    -webkit-appearance: none;
+    transition: transform 0.1s, background 0.15s;
+}
+.btn:active { transform: scale(0.97); background: #2868a0; }
+.btn-secondary {
+    background: #2a2a30;
+    border: 1px solid #555;
+}
+.btn-secondary:active { background: #3a3a40; }
+
+.hidden-input { display: none; }
+
+.uploaded-list {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #333;
+}
+.uploaded-list h2 { font-size: 14px; opacity: 0.7; margin: 0 0 12px; text-transform: uppercase; }
+.uploaded-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    border-bottom: 1px solid #2a2a30;
+    font-size: 13px;
+}
+.uploaded-item .check { color: #5cb85c; }
+.uploaded-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uploaded-item .size { opacity: 0.5; font-size: 11px; }
+
+.uploading {
+    padding: 12px;
+    background: #2a2a30;
+    border-radius: 6px;
+    margin: 12px 0;
+    text-align: center;
+    color: #7aa2f7;
+}
+
+.toast {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    right: 16px;
+    background: #5cb85c;
+    color: #fff;
+    padding: 14px 16px;
+    border-radius: 8px;
+    text-align: center;
+    z-index: 100;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+    animation: slideDown 0.2s;
+}
+.toast.error { background: #d9534f; }
+@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; } }
+</style>
+</head>
+<body>
+
+<div class="header">
+    <h1>📷 Bericht Upload</h1>
+    <div class="ref"><?php print htmlspecialchars($auftragsnr); ?></div>
+    <div class="info">Token gültig noch <?php print $valid_min; ?> Min · <?php print $tok->max_uploads - $tok->uploads_count; ?> Uploads übrig</div>
+</div>
+
+<div class="action-buttons">
+    <label class="btn" for="camera-input">📸 Foto aufnehmen</label>
+    <input type="file" id="camera-input" class="hidden-input" accept="image/*" capture="environment" multiple>
+
+    <label class="btn btn-secondary" for="gallery-input">📂 Aus Galerie wählen</label>
+    <input type="file" id="gallery-input" class="hidden-input" accept="image/*" multiple>
+</div>
+
+<div id="uploading-area"></div>
+
+<div class="uploaded-list">
+    <h2>Hochgeladen <span id="uploaded-count">(0)</span></h2>
+    <div id="uploaded-list"></div>
+</div>
+
+<script>
+const TOKEN = <?php print json_encode($token); ?>;
+const URL_UPLOAD = window.location.pathname + '?token=' + encodeURIComponent(TOKEN);
+let uploadedCount = 0;
+
+const cameraInput = document.getElementById('camera-input');
+const galleryInput = document.getElementById('gallery-input');
+const uploadingArea = document.getElementById('uploading-area');
+const uploadedList = document.getElementById('uploaded-list');
+const uploadedCountEl = document.getElementById('uploaded-count');
+
+[cameraInput, galleryInput].forEach(inp => {
+    inp.addEventListener('change', async () => {
+        if (!inp.files || !inp.files.length) return;
+        for (const file of inp.files) {
+            await uploadFile(file);
+        }
+        inp.value = '';
+    });
+});
+
+async function uploadFile(file) {
+    // Optional: clientseitig auf max 2000px resizen
+    const blob = await resizeImage(file, 2000);
+    const fname = file.name || 'photo.jpg';
+
+    const status = document.createElement('div');
+    status.className = 'uploading';
+    status.textContent = '⬆ ' + fname + ' wird hochgeladen…';
+    uploadingArea.appendChild(status);
+
+    const fd = new FormData();
+    fd.append('token', TOKEN);
+    fd.append('file', blob, fname);
+
+    try {
+        const r = await fetch(URL_UPLOAD, { method: 'POST', body: fd });
+        const data = await r.json();
+        status.remove();
+        if (data.success) {
+            uploadedCount++;
+            uploadedCountEl.textContent = '(' + uploadedCount + ')';
+            const item = document.createElement('div');
+            item.className = 'uploaded-item';
+            item.innerHTML = '<span class="check">✓</span><span class="name">' + escapeHtml(data.filename) + '</span>';
+            uploadedList.prepend(item);
+            toast('Hochgeladen: ' + fname);
+        } else {
+            toast('Fehler: ' + (data.error || 'unbekannt'), true);
+        }
+    } catch (e) {
+        status.remove();
+        toast('Netzwerkfehler', true);
+    }
+}
+
+async function resizeImage(file, maxSide) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        const url = URL.createObjectURL(file);
+        img.onload = () => {
+            URL.revokeObjectURL(url);
+            const scale = Math.min(1, maxSide / Math.max(img.width, img.height));
+            if (scale === 1) {
+                resolve(file);
+                return;
+            }
+            const c = document.createElement('canvas');
+            c.width  = Math.round(img.width * scale);
+            c.height = Math.round(img.height * scale);
+            c.getContext('2d').drawImage(img, 0, 0, c.width, c.height);
+            c.toBlob((blob) => resolve(blob || file), 'image/jpeg', 0.85);
+        };
+        img.onerror = () => { URL.revokeObjectURL(url); resolve(file); };
+        img.src = url;
+    });
+}
+
+function toast(msg, isError) {
+    const t = document.createElement('div');
+    t.className = 'toast' + (isError ? ' error' : '');
+    t.textContent = msg;
+    document.body.appendChild(t);
+    setTimeout(() => t.remove(), 2500);
+}
+
+function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+</script>
+
+</body>
+</html>
--- a/sql/llx_bericht_upload_token.key.sql
+++ b/sql/llx_bericht_upload_token.key.sql
@ -0,0 +1,2 @@
+ALTER TABLE llx_bericht_upload_token ADD INDEX idx_but_bericht (fk_bericht);
+ALTER TABLE llx_bericht_upload_token ADD INDEX idx_but_expires (expires_at);
--- a/sql/llx_bericht_upload_token.sql
+++ b/sql/llx_bericht_upload_token.sql
@ -0,0 +1,13 @@
+-- Tokens für Mobile-Upload (Phase 2.1)
+-- Ein Token autorisiert Foto-Uploads zu genau einem Bericht für eine begrenzte Zeit.
+CREATE TABLE llx_bericht_upload_token (
+    rowid           INTEGER AUTO_INCREMENT PRIMARY KEY,
+    token           VARCHAR(64) NOT NULL,
+    fk_bericht      INTEGER NOT NULL,
+    fk_user_creat   INTEGER NOT NULL,
+    expires_at      DATETIME NOT NULL,
+    uploads_count   INTEGER DEFAULT 0,
+    max_uploads     INTEGER DEFAULT 100,
+    datec           DATETIME NOT NULL,
+    UNIQUE KEY uniq_token (token)
+) ENGINE=innodb;