From 9dcfa7d9f588cecf5cc24ae821f0daf0ca9644f8 Mon Sep 17 00:00:00 2001
From: Jeuner <62662523+Jeuners@users.noreply.github.com>
Date: Mon, 7 Sep 2026 16:12:23 +0200
Subject: [PATCH] fix: show uploaded images inline instead of just the filename
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bilder wurden bisher nur als Textzeile "Hochgeladen: X" bestätigt, nie
tatsächlich angezeigt. Zeigt jetzt sofort beim Auswählen eine lokale
Vorschau im Transkript (data:-URL, passt bereits in die bestehende
img-src-CSP), bevor der Upload überhaupt beim Server ankommt.

Verifiziert per echtem Playwright-Browsertest inkl. fake mic/WebRTC:
Bild landet als <img> im Transkript, keine Konsolenfehler.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LVgSHNHdRx3UNTBodFmhRA
---
 web/app.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/web/app.js b/web/app.js
index 425ce2e..6b955e4 100644
--- a/web/app.js
+++ b/web/app.js
@@ -61,6 +61,29 @@ function addUploadNote(filename) {
   $("messages").append(article);
   $("messages").scrollTop = $("messages").scrollHeight;
 }
+function addUploadedImage(dataUrl, filename) {
+  $("messages").querySelector(".empty")?.remove();
+  const article = document.createElement("article");
+  article.className = "message user";
+  const speaker = document.createElement("span");
+  speaker.className = "speaker";
+  speaker.textContent = "Du";
+  const img = document.createElement("img");
+  img.className = "generated-image";
+  img.src = dataUrl;
+  img.alt = filename;
+  article.append(speaker, img);
+  $("messages").append(article);
+  $("messages").scrollTop = $("messages").scrollHeight;
+}
+function fileToDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
 function receive(event) {
   let message;
   try { message = JSON.parse(event.data); } catch { return; }
@@ -76,6 +99,10 @@ function receive(event) {
 }
 async function uploadFile(file) {
   if (!pcId) return;
+  if (file.type.startsWith("image/")) {
+    try { addUploadedImage(await fileToDataURL(file), file.name); }
+    catch { /* preview failed to render; upload still proceeds below */ }
+  }
   const body = new FormData();
   body.append("pc_id", pcId);
   body.append("file", file);