I am trying to upload an image and send it as a formData. However, during the binding, it is changing from File to string.
Form.svelte
<!-- src/components/Form.svelte --><script lang="ts"> import { createEventDispatcher } from 'svelte'; import Field from "./Field.svelte"; import type { Video } from '../model/video'; import { submitForm } from '../lib/api'; const dispatch = createEventDispatcher(); export let video: Video = { name: '', description: '', ep_count: 0, cover_image: undefined }; // export let errors: Record<string, string> = {}; export let loading = false; export let errors: Record<string, { message: string }> = {}; export let darkMode: boolean; $: if (video.cover_image) { console.log("video.cover_image"); console.log(video.cover_image); console.log(video.cover_image.size); } async function handleSubmit() { // Validate form fields here, set errors if necessary if (!video.name.trim()) { errors.name = { message: 'Name is required' }; return; } console.log('Form submitted:', video); // Perform form submission if validation passes await submitForm(video); dispatch('submit'); }</script><form on:submit|preventDefault={handleSubmit} class="max-w-md mx-auto p-4 bg-{darkMode ? 'gray-800' : 'white'} shadow-md rounded-md form-control"><Field name="cover_image" label="Cover Image" type="file" bind:value={video.cover_image} errors={errors} /><div class="mt-6 flex justify-center"><button type="submit" class="btn" disabled={loading}> {loading ? 'Saving...' : 'Save'}</button></div></form>Field.svelte
<!-- src/components/Field.svelte --><script lang="ts"> export let value: any; export let label: string; export let name: string; export let type: string; export let errors: Record<string, { message: string }> = {}; $: hasErrors = errors && errors[name]; const handleInput = (e: Event) => { // Ensure that the event is an input event before accessing the value if (e.target instanceof HTMLInputElement) { if (type === "number") { value = Number(e.target.value); } else if (type === "file") { const files = e.target.files; let file = files && files.length > 0 ? files[0] : null; console.log(files); console.log("handleInput: "); console.log(typeof file); console.log("Properties of object:", file?.size); value = file; console.log("Properties of object:", value?.size); } else { value = e.target.value; } } };</script><div class="mb-4 flex items-center"><label for={name} class="text-gray-700 text-sm font-bold mb-2 label"> {label}</label> {#if type === "file"}<input type="file" placeholder={label} id={name} class="file-input w-full max-w-xs" bind:value on:input={handleInput} accept="image/*" /> {:else if type === "checkbox"}<input type="number" placeholder={label} id={name} class="input input-bordered w-full max-w-xs" bind:value on:input={handleInput} /> {:else}<!-- Default case: render a text input if the type is not 'file' or 'checkbox' --><input type="text" placeholder={label} id={name} class="input input-bordered w-full max-w-xs" bind:value on:input={handleInput} /> {/if} {#if hasErrors}<p class="text-red-500 text-xs italic mt-1">{errors[name].message}</p> {/if}</div><!-- class={`w-full p-2 ${inputClass} border`} -->Video.ts
export interface Video { name: string; description: string; cover_image?: File; ep_count: number;}console logs
FileList [ File ]handleInput: object Properties of object: 88188 Properties of object: 88188 video.cover_image File { name: "sample_image.png", lastModified: 1703955579385, webkitRelativePath: "", size: 88188, type: "image/png" }88188 video.cover_image C:\fakepath\sample_image.png undefinedwhy is video_cover_image being printed two times and first with file and then as a string, because of that, i am unable to submit the form with the image.