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