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 { goto } from '$app/navigation';
import { import {
Camera, Camera,
ImageUp,
Loader2, Loader2,
Wand2, Wand2,
AlertTriangle, AlertTriangle,
@@ -17,6 +18,7 @@
const store = new PhotoUploadStore(); const store = new PhotoUploadStore();
let saving = $state(false); let saving = $state(false);
let cameraInput = $state<HTMLInputElement | null>(null);
let fileInput = $state<HTMLInputElement | null>(null); let fileInput = $state<HTMLInputElement | null>(null);
function onPick(e: Event) { function onPick(e: Event) {
@@ -85,17 +87,38 @@
Fotografiere ein gedrucktes oder handgeschriebenes Rezept. Eine Seite, Fotografiere ein gedrucktes oder handgeschriebenes Rezept. Eine Seite,
scharf, gut ausgeleuchtet. scharf, gut ausgeleuchtet.
</p> </p>
<button <div class="row">
type="button" <button
class="btn primary" type="button"
onclick={() => fileInput?.click()} class="btn primary"
disabled={!network.online} onclick={() => cameraInput?.click()}
> disabled={!network.online}
<Camera size={18} strokeWidth={2} /> >
<span>Foto wählen oder aufnehmen</span> <Camera size={18} strokeWidth={2} />
</button> <span>Kamera</span>
<!-- Ohne `capture`-Attribut: Browser zeigt auf Mobile die volle Auswahl </button>
(Kamera / Fotomediathek / Datei), statt direkt die Kamera zu oeffnen. --> <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 <input
bind:this={fileInput} bind:this={fileInput}
type="file" type="file"