Zwei bis drei Bilder je Supportmeldung -- und zwei Funde unterwegs

VanVan im Support, Meldung #11, VIERMAL gemeldet: „Hier im
Supportbereich kann man immer nur ein Bild hinzufuegen bei einer
Meldung. 2-3 waeren besser." Und in der zweiten Runde der Satz, auf
den es ankommt: „wenn man es nacheinander versucht hinzuzufuegen wird
das Bild immer nur ersetzt."

EINE TABELLE STATT NEUER SPALTEN

`support_bilder` haelt ab jetzt JEDES Supportbild -- das der Meldung
(`runde_nr` NULL) und das einer Antwort (`runde_nr` = Runde). Die
Alternative waere `bild2_datei`, `bild3_datei` gewesen, und beim
vierten Bild wieder. Eine Zeile je Bild kennt keine Obergrenze im
Schema; die Grenze steht an EINER Stelle im Code (`BILDER_MAX = 3`)
und kommt von dort in die Oberflaeche, statt dort ein zweites Mal
zu stehen.

DIE ACHT VORHANDENEN BILDER WANDERN MIT. Ohne diesen Schritt haette
die neue Tabelle ab heute recht und die alten Bilder waeren
unsichtbar -- ohne Fehler, ohne rote Zeile, nur acht leere Karten.
Der Umzug steht NACH der Spaltennachruestung: Er liest
`urteil_bild_datei`, und die gibt es in einer bestehenden Datenbank
erst, nachdem sie ergaenzt wurde. Stuende er davor, scheiterte er
genau dort, wo es darauf ankommt -- live, waehrend lokal alles gruen
bliebe, weil jede Pruefung ihre Datenbank frisch anlegt.

DREI BILDER IN EINER ANFRAGE

`x-bilder: 20481,15320` sagt, wo zu schneiden ist, der Rumpf ist die
Aneinanderreihung. `multipart/form-data` haette einen Zerleger
gebraucht, den dieses Haus nicht hat; drei Anfragen nacheinander
haetten den Zustand „Meldung da, Bild zwei laedt noch" erzeugt --
genau den, gegen den die Kommentare an dieser Route schon vorher
argumentieren. Die Summe muss auf das Byte stimmen, und jedes Stueck
wird einzeln an seinen ersten Bytes erkannt: Wer falsch schneidet,
bekommt eine Absage, kein verfaelschtes Bild. Ohne den Kopf gilt der
ganze Rumpf als ein Bild -- derselbe Satz mit einer Laenge, damit
eine Seite aus dem Zwischenspeicher weiterlaeuft.

EINE ROUTE STATT DREI. `/:id/bild` und `/:id/runde/:nr/bild` sind
weg; es gibt `/:id/bild/:bid`. Wohin ein Bild gehoert, steht in
seiner Zeile -- der Weg muss es nicht wiederholen. Die
Meldungsnummer bleibt trotzdem im Pfad: Sie ist die
Sichtbarkeitsfrage, und beides muss zusammenpassen (gemessen).

ZWEI FUNDE, DIE DIE PRUEFUNG GEMACHT HAT UND NICHT ICH

 1. UEBER DIE SEITE KAM GAR KEIN BILD MEHR AN. Beim Melden stand
    kein `Content-Type`. Das ging gut, solange der Rumpf eine
    einzelne Datei war -- ein `File` bringt seinen Typ mit. Ein
    `Blob` aus mehreren hat keinen, `fetch` schickt die Zeile dann
    gar nicht, `express.raw` fuehlt sich nicht zustaendig, und der
    Server bekam einen leeren Rumpf. Die Meldung waere durchgegangen,
    der Text angekommen, die Bilder weg -- ohne Fehlermeldung. Alle
    Pruefungen am Server waren dabei gruen; gefunden hat es erst der
    echte Browser.

 2. DAS KREUZ DES DRITTEN BILDES LAG AUF DEM ZWEITEN. Der
    Entfernen-Knopf ist 44 px breit und absolut gesetzt, der Kasten
    aber nur so breit wie sein Bild. Bei einem schmalen Bild ragt er
    darueber hinaus -- wer „das zweite weg" antippt, loescht das
    dritte. `min-width`/`min-height` loesen das an der Ursache: Ein
    Kasten ist nie schmaler als der Knopf in ihm.

WAS ICH FALSCH ANGENOMMEN HATTE: Ich hatte eingebaut, dass ein
Nachtrag in derselben Runde die Bilder ersetzt. Die Pruefung dazu
wurde rot -- zu Recht: Eine zweite Antwort in derselben Runde kann
es nicht geben, die erste verlaesst den Stand „wartet". Der Code
waere nie gelaufen und damit nie pruefbar gewesen. Er ist weg; an
seiner Stelle steht der Beweis, dass er nicht fehlt.

DREI WEITERE ROTE ZEILEN, DIE NICHT ZU DIESEM UMBAU GEHOERTEN

 * `manager-ziele.js` hatte einen ZWEITEN Notnagel
   (`frageNach ? … : confirm(…)`). `nachfrage.js` hat denselben
   laengst, und zwar mit dem vollstaendigen Text; der hiesige war
   der kuerzere und haette gewonnen. Zwei Antworten auf dieselbe
   Frage -- gemeldet von `pruef-nachfrage`.
 * Zwei Mittelpunkte in `reaktion.css` standen woertlich im
   `content`. Sie liegen im Latin-1-Block, wo `pruef-zeichen` die
   Truemmer einer verunglueckten Kodierung sucht. Jetzt als Escape
   -- im Browser nachgemessen, es steht Zeichen fuer Zeichen
   dasselbe da.
 * Das Aufraeumen nach 90 Tagen loeschte nur das EINE Bild der
   Meldung; die Bilder aus den Antwortrunden blieben ohne Zeile auf
   der Platte liegen. Die Liste kommt jetzt aus einer Abfrage statt
   aus einer Spalte und kann deshalb nicht wieder unvollstaendig
   sein.

GEPRUEFT

  pruef-support            78 -> 104 ok
    darunter: der Umzug der alten Bilder auf einer eigenen
    Wegwerf-Datenbank -- zweimal und dreimal gestartet, nichts
    verdoppelt, Datum von damals erhalten
  pruef-support-bilder     NEU, 36 ok (echter Browser)
    dreimal nacheinander waehlen ergibt drei, das vierte wird mit
    einem Satz abgelehnt, dasselbe zaehlt nicht doppelt, einzeln
    entfernen laesst die anderen stehen, alle drei laden wirklich
    (naturalWidth), Kreuze 44x44 und keines verdeckt (mit Gegenprobe
    per Deckel), nichts ragt auf 390 px heraus
  pruef-nachfrage          69 -> 74 ok
  pruef-struktur          102 ok, 413 Routen (vorher 414: zwei weg,
                          eine neu)
  pruef-zeichen             7 ok (vorher 1 Fehler)
  pruef-aufbewahrung       45 ok
  pruef-manager-ziele     216 ok
  pruef-ports              10 ok · pruef-portnummern 41 ok
    (die neue Pruefdatei verschiebt die abgeleiteten Nummern)

NUR DAS AGENTURHAUS IST BETROFFEN. Die Supportseite liegt unter
`/workspace`; am Crew-Haus aendert sich keine Zeile.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/js/nachfrage.js

@@ -82,10 +82,15 @@
      gleichzeitig kann der Browser ohnehin nicht, und ein neuer je
      Aufruf wuerde den Fokus verlieren. */
   var dlg = null, feld = null, tippfeld = null, zahlfeld = null, fehlerZeile = null;
-  /* Das gewaehlte Bild und die Adresse seiner Vorschau. Beides lebt
-     hier und nicht im Aufruf: `bauen()` haengt die Zuhoerer einmal an,
-     und die muessen auch beim naechsten Oeffnen noch dasselbe meinen. */
-  var bildfeld = null, gewaehltesBild = null, bildUrl = null;
+  /* Die gewaehlten Bilder. Sie leben hier und nicht im Aufruf:
+     `bauen()` haengt die Zuhoerer einmal an, und die muessen auch
+     beim naechsten Oeffnen noch dasselbe meinen.
+
+     EINE LISTE SEIT DEM 02.10.2026 (vorher eine einzelne Variable).
+     VanVan im Support, Meldung #11: „2-3 wären besser." `bildMax`
+     sagt, wie viele diese eine Frage zulaesst -- die Vorgabe 1 haelt
+     jeden anderen Aufruf im Haus bei genau dem Verhalten von vorher. */
+  var bildfeld = null, gewaehlteBilder = [], bildMax = 1;
 
   function bauen() {
     if (dlg) return dlg;
@@ -133,7 +138,7 @@
          zehn anderen Aufrufer im Haus nichts. */
       + '<div class="nachfrage__zeile" data-teil="bildzeile" hidden>'
       + '<span class="feld-schild" data-teil="bildschild"></span>'
-      + '<input id="nachfrage-bild" type="file" accept="image/*" hidden />'
+      + '<input id="nachfrage-bild" type="file" accept="image/*" multiple hidden />'
       + '<div class="nachfrage__bild">'
       + '<button type="button" class="knopf knopf--klein" data-teil="bildwaehlen">'
       + 'Bild wählen</button>'
@@ -141,7 +146,7 @@
       + '<button type="button" class="abmelden" data-teil="bildweg" hidden>'
       + 'Entfernen</button>'
       + '</div>'
-      + '<img class="nachfrage__vorschau" data-teil="bildvorschau" alt="" hidden />'
+      + '<div class="nachfrage__vorschauen" data-teil="bildvorschauen" hidden></div>'
       + '</div>'
       + '<p class="nachfrage__fehler" data-teil="fehler" role="alert"></p>'
       + '<div class="dialog__knoepfe">'
@@ -162,50 +167,124 @@
     teil('bildwaehlen').addEventListener('click', function () { bildfeld.click(); });
     teil('bildweg').addEventListener('click', function () {
       bildfeld.value = '';
-      bildSetzen(null);
+      gewaehlteBilder = [];
+      bilderZeichnen();
     });
     bildfeld.addEventListener('change', function (e) {
-      var datei = (e.target.files && e.target.files[0]) || null;
-      /* NUR BILDER -- derselbe Satz wie beim Melden. Der Server sagt
-         es auch, aber erst nach dem Hochladen; hier steht es, bevor
-         jemand wartet. */
-      if (datei && datei.type && datei.type.indexOf('image/') !== 0) {
-        fehlerZeile.textContent = 'Als Anhang geht ein Foto – PNG, JPEG, WebP oder GIF.';
-        bildfeld.value = '';
-        bildSetzen(null);
-        return;
-      }
-      fehlerZeile.textContent = '';
-      bildSetzen(datei);
+      bilderDazu(e.target.files ? Array.prototype.slice.call(e.target.files) : []);
+      /* DAS FELD WIRD GELEERT, die Liste nicht. Sonst meldet der
+         Browser beim zweiten Antippen DESSELBEN Bildes kein
+         `change` -- er sieht keine Aenderung -- und es saehe aus, als
+         waere der Knopf kaputt. */
+      e.target.value = '';
     });
     return dlg;
   }
 
-  /** Was gewaehlt ist -- auf dem Bildschirm und in der Variablen.
+  /** Neu Gewaehltes DAZULEGEN statt ersetzen.
+   *
+   *  VanVan, Meldung #11, zweite Runde: „wenn man es nacheinander
+   *  versucht hinzuzufügen wird das Bild immer nur ersetzt." Auch mit
+   *  `multiple` ersetzt jede neue Auswahl die `files`-Liste komplett;
+   *  auf dem Handy tippt man aber dreimal statt einmal. */
+  function bilderDazu(neue) {
+    var meldung = '';
+    /* ==== BEI GENAU EINEM PLATZ IST EINE NEUE WAHL EINE KORREKTUR ==
+
+       Zwei Faelle, eine Regel: Mehr als `bildMax` geht nie.
+
+       Ist `bildMax` 1, gibt es nichts, wozu man etwas DAZULEGEN
+       koennte -- wer dann noch einmal waehlt, meint „doch lieber
+       dieses". Ihn erst auf „Entfernen" zu schicken waere ein
+       Klick, der nichts klaert. Das ist genau das Verhalten, das
+       dieser Dialog seit dem 02.10. frueh hatte, und es bleibt.
+
+       Ab zwei Plaetzen wird gefuellt und das Ueberzaehlige
+       ABGELEHNT -- dort waere „ersetzen" der Fehler, den VanVan
+       gemeldet hat: Das zuerst Gewaehlte verschwaende unbemerkt. */
+    if (bildMax === 1 && neue.length) gewaehlteBilder = [];
+    for (var i = 0; i < neue.length; i++) {
+      var datei = neue[i];
+      if (gewaehlteBilder.length >= bildMax) {
+        meldung = bildMax === 1
+          ? 'Hier geht nur ein Bild.'
+          : 'Mehr als ' + bildMax + ' Bilder gehen nicht.';
+        break;
+      }
+      /* NUR BILDER -- derselbe Satz wie beim Melden. Der Server sagt
+         es auch, aber erst nach dem Hochladen; hier steht es, bevor
+         jemand wartet. */
+      if (datei.type && datei.type.indexOf('image/') !== 0) {
+        meldung = 'Als Anhang geht ein Foto – PNG, JPEG, WebP oder GIF.';
+        continue;
+      }
+      var schon = gewaehlteBilder.some(function (d) {
+        return d.name === datei.name && d.size === datei.size
+          && d.lastModified === datei.lastModified;
+      });
+      if (!schon) gewaehlteBilder.push(datei);
+    }
+    fehlerZeile.textContent = meldung;
+    bilderZeichnen();
+  }
+
+  /** Was gewaehlt ist -- auf dem Bildschirm.
    *
    *  DIE VORSCHAU IST DER PUNKT. Wer sieht, was er anhaengt, haengt
    *  seltener das falsche Bild an; dieselbe Ueberlegung wie auf der
-   *  Supportseite beim Melden. `createObjectURL` wird wieder
-   *  freigegeben -- sonst haelt jedes abgewaehlte Bild den Speicher
-   *  bis zum naechsten Laden der Seite. */
-  function bildSetzen(datei) {
-    if (bildUrl) { try { URL.revokeObjectURL(bildUrl); } catch (e) { /* egal */ } }
-    bildUrl = null;
-    gewaehltesBild = datei || null;
+   *  Supportseite beim Melden.
+   *
+   *  JEDES BILD HAT SEIN EIGENES KREUZ, seit es mehrere sein duerfen:
+   *  Wer das dritte falsch erwischt hat, soll nicht alle drei neu
+   *  waehlen muessen.
+   *
+   *  DIE ADRESSEN WERDEN WIEDER FREIGEGEBEN -- sonst haelt jede
+   *  Vorschau ihr Bild bis zum naechsten Laden der Seite im
+   *  Arbeitsspeicher fest. */
+  function bilderZeichnen() {
     var name = teil('bildname');
     var weg = teil('bildweg');
-    var schau = teil('bildvorschau');
-    if (!datei) {
+    var schau = teil('bildvorschauen');
+
+    var alte = schau.querySelectorAll('img[data-url]');
+    for (var a = 0; a < alte.length; a++) {
+      try { URL.revokeObjectURL(alte[a].dataset.url); } catch (e) { /* egal */ }
+    }
+    schau.textContent = '';
+
+    if (!gewaehlteBilder.length) {
       name.textContent = 'Noch keins gewählt';
       weg.hidden = true;
       schau.hidden = true;
-      schau.removeAttribute('src');
       return;
     }
-    name.textContent = datei.name + ' · ' + Math.round(datei.size / 1024) + ' KB';
+    name.textContent = gewaehlteBilder.length === 1
+      ? gewaehlteBilder[0].name + ' · ' + Math.round(gewaehlteBilder[0].size / 1024) + ' KB'
+      : gewaehlteBilder.length + ' von ' + bildMax + ' Bildern';
     weg.hidden = false;
-    bildUrl = URL.createObjectURL(datei);
-    schau.src = bildUrl;
+
+    gewaehlteBilder.forEach(function (datei, i) {
+      var kasten = document.createElement('div');
+      kasten.className = 'nachfrage__vorschau';
+      var url = URL.createObjectURL(datei);
+      var img = document.createElement('img');
+      img.dataset.url = url;
+      img.src = url;
+      img.alt = 'Vorschau von ' + datei.name;
+      kasten.appendChild(img);
+      var raus = document.createElement('button');
+      raus.type = 'button';
+      raus.className = 'nachfrage__vorschau-weg';
+      raus.textContent = '✕';
+      raus.title = datei.name + ' wieder entfernen';
+      raus.setAttribute('aria-label', datei.name + ' wieder entfernen');
+      raus.addEventListener('click', function () {
+        gewaehlteBilder.splice(i, 1);
+        bilderZeichnen();
+      });
+      kasten.appendChild(raus);
+      schau.appendChild(kasten);
+    });
     schau.hidden = false;
   }
 
@@ -265,10 +344,13 @@
     var zahlMax = o.zahlMax || 0;
     var zahlLeer = !!o.zahlLeer;
     var zahlHinweis = o.zahlHinweis || '';
-    /* EIN BILD DAZU -- die Beschriftung der Zeile, leer heisst: kein
+    /* BILDER DAZU -- die Beschriftung der Zeile, leer heisst: kein
        Bildfeld. Nie Pflicht: Ein Bildschirmfoto hilft, aber wer
-       keines hat, soll trotzdem antworten koennen. */
+       keines hat, soll trotzdem antworten koennen.
+       `bildMax` sagt, wie viele. Vorgabe 1 -- ohne diese Angabe
+       verhaelt sich der Dialog wie vor dem 02.10.2026. */
     var bild = o.bild || '';
+    bildMax = Math.max(1, Number(o.bildMax) || 1);
     var NIE_ZURUECK = 'Das lässt sich danach nicht mehr rückgängig machen.';
 
     /* ---- Ausgang 2: kein <dialog> -> confirm() mit DEMSELBEN Text ----
@@ -304,9 +386,11 @@
       /* IM NOTAUSGANG GIBT ES KEIN BILD, und das wird gesagt statt
          verschwiegen: `window.prompt` kann keine Datei. Wer hier
          landet, hat einen Browser ohne `<dialog>` -- er kann
-         antworten, nur eben ohne Anhang. `bild: null` sorgt dafuer,
-         dass die aufrufende Stelle nicht raten muss. */
-      if (bild) erg.bild = null;
+         antworten, nur eben ohne Anhang. Die LEERE LISTE sorgt
+         dafuer, dass die aufrufende Stelle nicht raten muss -- und
+         dass sie dieselbe Form bekommt wie im Normalfall, statt
+         einmal `null` und einmal ein Feld. */
+      if (bild) erg.bilder = [];
       return Promise.resolve((grund || zahl || eingabe || bild) ? erg : true);
     }
 
@@ -355,7 +439,8 @@
       /* JEDES OEFFNEN FAENGT LEER AN. Ohne diese Zeile haengt beim
          zweiten Mal noch das Bild vom ersten dran -- und niemand
          sieht es, weil der Dialog oben schon zu war. */
-      bildSetzen(null);
+      gewaehlteBilder = [];
+      bilderZeichnen();
     }
     fehlerZeile.textContent = '';
 
@@ -424,11 +509,11 @@
           }
           erg2.zahl = n;
         }
-        /* `null`, wenn keins gewaehlt wurde -- und nicht `undefined`.
-           Die aufrufende Stelle fragt dann `antwort.bild`, bekommt
-           eine klare Absage und muss nicht wissen, ob das Feld
-           ueberhaupt angeboten wurde. */
-        if (bild) erg2.bild = gewaehltesBild || null;
+        /* IMMER EINE LISTE, auch wenn sie leer ist -- und nicht
+           `undefined`. Die aufrufende Stelle schleift darueber und
+           muss weder wissen, ob das Feld angeboten wurde, noch den
+           Sonderfall „genau eines" kennen. */
+        if (bild) erg2.bilder = gewaehlteBilder.slice();
         antwort = (grund || zahl || eingabe || bild) ? erg2 : true;
         dlg.close();
       }