fix(capture): offer camera and gallery on Add photo

Why
On phone, the single file control opened the camera because it set
capture=environment. CAPTURE.md requires camera or picker.

Scope
AddPhoto.svelte now has Take photo (capture=environment) and Choose
from gallery (no capture). Both call the same onPicked path.

Verification
Playwright against overnight after redeploy asserts two inputs and
gallery has no capture attribute.
This commit is contained in:
2026-09-14 15:23:08 +00:00
parent c6a48c8d91
commit 0e94b1fd2a
+12 -4
View File
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
export let onPicked: (f: File) => void; export let onPicked: (f: File) => void;
let file: HTMLInputElement | undefined;
const pick = (e: Event) => { const pick = (e: Event) => {
const f = (e.target as HTMLInputElement).files?.[0]; const f = (e.target as HTMLInputElement).files?.[0];
@@ -16,16 +15,25 @@
<li>Top-down, lens parallel to the face.</li> <li>Top-down, lens parallel to the face.</li>
<li>Slab length along the long side of the picture.</li> <li>Slab length along the long side of the picture.</li>
</ul> </ul>
<input type="file" accept="image/*" capture="environment" bind:this={file} on:change={pick} /> <div class="pick">
<label class="pick-btn">Take photo
<input type="file" accept="image/*" capture="environment" on:change={pick} />
</label>
<label class="pick-btn">Choose from gallery
<input type="file" accept="image/*" on:change={pick} />
</label>
</div>
</section> </section>
<style> <style>
.panel { padding: 24px 16px; color: #eee; } .panel { padding: 24px 16px; color: #eee; }
h1 { font-size: 1.4rem; } h1 { font-size: 1.4rem; }
.setup { color: #bbb; line-height: 1.6; font-size: 0.95rem; } .setup { color: #bbb; line-height: 1.6; font-size: 0.95rem; }
input[type='file'] { width: 100%; margin-top: 20px; color: #eee; } .pick { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
input[type='file']::file-selector-button { .pick-btn {
background: #00e5ff; color: #002; border: 0; border-radius: 8px; background: #00e5ff; color: #002; border: 0; border-radius: 8px;
padding: 12px 20px; font-size: 1rem; font-weight: 600; padding: 12px 20px; font-size: 1rem; font-weight: 600;
text-align: center; cursor: pointer;
} }
.pick-btn input[type='file'] { display: none; }
</style> </style>