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