Want to save a photo taken on a phone in my SvelteKit project

My project allows the user to upload an image file from their desktop. If the user is on mobile, they can either take a photo from their phone's camera, or upload from their camera roll.

Even though a photo can be taken just fine on mobile, when the user goes to the next page, the photo should be visible. However, in the current state of things, the taken photo is not saved. But if a photo is uploaded from the camera roll, it appears on the next page just fine.

I'm having a hard time tracking down a way to save a freshly taken photo as if it were a traditional file upload.

<script lang="ts">  import { createEventDispatcher } from 'svelte';  ...  let input: HTMLInputElement;  const dispatch = createEventDispatcher();  ...   async function onChange() {    if (input.files && input.files.length < 2) dispatchFile(input.files[0])  }  ...  function dispatchFile(file: File) {    dispatch('stepChange', { file }); // 'stepChange' refers to moving to the next page of the user flow  }</script>

<div slot="is-mobile-or-tablet" class="flex h-full w-full items-center justify-center"><div class="grid grid-rows-4 gap-3"><input      type="file"      id="actual-btn"      accept="image/*"      capture="environment"      hidden      bind:this={input}      on:change={onChange}    /><label for="actual-btn">Take Photo</label><input      type="file"      name="photo"      id="camera-roll-btn"      accept="image/*"      hidden      bind:this={input}      on:change={onChange}    /><label for="actual-btn">Camera Roll</label>  ...</div></div>

If there's a way to do this without installing any additional packages or plugins, that would be greatly preferred.