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
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user