feat(photo-upload): zwei Buttons fuer Kamera vs. Datei-Picker
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 30s

Android-Chrome auf Tablet verhaelt sich zickig: mit capture="environment"
nur Kamera, ohne capture nur Datei-Picker -- nie beide. Zwei separate
Buttons (mit jeweils eigenem Input-Element) machen die Wahl explizit
und funktionieren ueberall eindeutig.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-21 13:45:37 +02:00
parent 33ee6fbf2e
commit fb7c2f0e9b

View File

@@ -2,6 +2,7 @@
import { goto } from '$app/navigation';
import {
Camera,
ImageUp,
Loader2,
Wand2,
AlertTriangle,
@@ -17,6 +18,7 @@
const store = new PhotoUploadStore();
let saving = $state(false);
let cameraInput = $state<HTMLInputElement | null>(null);
let fileInput = $state<HTMLInputElement | null>(null);
function onPick(e: Event) {
@@ -85,17 +87,38 @@
Fotografiere ein gedrucktes oder handgeschriebenes Rezept. Eine Seite,
scharf, gut ausgeleuchtet.
</p>
<button
type="button"
class="btn primary"
onclick={() => fileInput?.click()}
disabled={!network.online}
>
<Camera size={18} strokeWidth={2} />
<span>Foto wählen oder aufnehmen</span>
</button>
<!-- Ohne `capture`-Attribut: Browser zeigt auf Mobile die volle Auswahl
(Kamera / Fotomediathek / Datei), statt direkt die Kamera zu oeffnen. -->
<div class="row">
<button
type="button"
class="btn primary"
onclick={() => cameraInput?.click()}
disabled={!network.online}
>
<Camera size={18} strokeWidth={2} />
<span>Kamera</span>
</button>
<button
type="button"
class="btn ghost"
onclick={() => fileInput?.click()}
disabled={!network.online}
>
<ImageUp size={18} strokeWidth={2} />
<span>Aus Dateien</span>
</button>
</div>
<!-- Zwei separate Inputs: capture="environment" oeffnet direkt die Kamera,
das andere zeigt den Datei-/Fotomediathek-Picker. Android-Chrome auf
Tablet zeigt sonst bei capture="environment" nur die Kamera; ohne
capture dagegen nur den Datei-Picker. Explizite Wahl ist eindeutig. -->
<input
bind:this={cameraInput}
type="file"
accept="image/*"
capture="environment"
hidden
onchange={onPick}
/>
<input
bind:this={fileInput}
type="file"