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:
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
export let onPicked: (f: File) => void;
|
||||
let file: HTMLInputElement | undefined;
|
||||
|
||||
const pick = (e: Event) => {
|
||||
const f = (e.target as HTMLInputElement).files?.[0];
|
||||
@@ -16,16 +15,25 @@
|
||||
<li>Top-down, lens parallel to the face.</li>
|
||||
<li>Slab length along the long side of the picture.</li>
|
||||
</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>
|
||||
|
||||
<style>
|
||||
.panel { padding: 24px 16px; color: #eee; }
|
||||
h1 { font-size: 1.4rem; }
|
||||
.setup { color: #bbb; line-height: 1.6; font-size: 0.95rem; }
|
||||
input[type='file'] { width: 100%; margin-top: 20px; color: #eee; }
|
||||
input[type='file']::file-selector-button {
|
||||
.pick { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
|
||||
.pick-btn {
|
||||
background: #00e5ff; color: #002; border: 0; border-radius: 8px;
|
||||
padding: 12px 20px; font-size: 1rem; font-weight: 600;
|
||||
text-align: center; cursor: pointer;
|
||||
}
|
||||
.pick-btn input[type='file'] { display: none; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user