Manually setValue won't work.

[davidkngo]

Hi, I am currently working on svelte forms. I have tried to set value manually with function setValue in order to get base64 encoded image instead of fake path string but failed to do so. If I set id or name props to input component I will get fakepath of the image, otherwise, it will return an empty string.

[si3nloong]

Can you show me the codes so that I can reproduce it?

[davidkngo]

<script lang="ts">
	import Label from '../components/Form/Label.svelte';
	import { useForm, Field, defineRule } from 'svelte-reactive-form';

	interface IProfileProps {
		name: string;
		country: string;
		dateOfBirth: number;
		passportImg: string;
	}

	const form$ = useForm<IProfileProps>();

	const { field, register, setValue, control, onSubmit } = form$;

	const loadImgToBase64 = (file: Blob) => {
		return new Promise<string>((resolve, reject) => {
			try {
				const reader = new FileReader();
				reader.onload = (e) => {
					resolve(e.target.result as string);
				};
				reader.readAsDataURL(file);
			} catch (err) {
				reject(err);
			}
		});
	};

	const handleSubmit = async (data: IProfileProps, e: any) => {
		console.log('Data =>', data);
		console.log('Event =>', e);
	};

	const onUploadFile = async (e: any) => {
		const base64 = await loadImgToBase64(e.target.files[0]);
		console.log(base64);
		setValue('passportImg', base64);
	};
</script>

<div class="flex flex-col items-center mt-10">
	<div class="text-3xl font-bold mb-10">Profile</div>
	<form class="w-96" on:submit|preventDefault={onSubmit(handleSubmit)}>
		<div class="mb-10 flex flex-col">
			<Label id="name" label="Name" required />
			<input
				class="border-2 border-black rounded px-2"
				name="name"
				type="text"
				on:input={(e) => setValue('name', e.target.value)}
			/>
		</div>

		<div class="mb-10 flex flex-col">
			<Label id="country" label="Country" required />
			<input
				class="border-2 border-black rounded px-2"
				name="country"
				type="text"
				on:input={(e) => setValue('country', e.target.value)}
			/>
		</div>
		<div class="mb-10 flex flex-col">
			<Label id="dateOfBirth" label="Date Of Birth" required />
			<input
				class="border-2 border-black rounded px-2"
				name="dateOfBirth"
				type="date"
				on:input={(e) => setValue('dateOfBirth', e.target.value)}
			/>
		</div>
		<div class="mb-10 flex flex-col">
			<Label id="passportImg" label="Passport Image" required />
			<input
				name="passportImg"
				class="border-2 border-black rounded px-2"
				type="file"
				accept="image/*"
				on:input={(e) => onUploadFile(e)}
			/>
		</div>

		<input
			class="bg-blue-300 hover:bg-blue-500 focus:bg-blue-700 text-white rounded py-2 w-32"
			type="submit"
			title="Submit"
		/>
	</form>
</div>

Here it is. Thanks for replying.

[si3nloong]

Can you try with the latest version?

For your information :

<input
    class="border-2 border-black rounded px-2"
    name="name"
    type="text"
    on:input={(e) => setValue('name', e.target.value)}
 />
 
 // if you specific name on your input, you may do like this

<input
    class="border-2 border-black rounded px-2"
    name="name"
    type="text"
    on:input={setValue}
 />

[si3nloong]

<script lang="ts">
	import Label from '../components/Form/Label.svelte';
	import { useForm, Field, defineRule } from 'svelte-reactive-form';

	interface IProfileProps {
		name: string;
		country: string;
		dateOfBirth: number;
		passportImg: string;
	}

	const form$ = useForm<IProfileProps>();

	const { field, register, setValue, control, onSubmit } = form$;

	const loadImgToBase64 = (file: Blob) => {
		return new Promise<string>((resolve, reject) => {
			try {
				const reader = new FileReader();
				reader.onload = (e) => {
					resolve(e.target.result as string);
				};
				reader.readAsDataURL(file);
			} catch (err) {
				reject(err);
			}
		});
	};

	const handleSubmit = async (data: IProfileProps, e: any) => {
		console.log('Data =>', data);
		console.log('Event =>', e);
	};

	const onUploadFile = async (e: any) => {
		const base64 = await loadImgToBase64(e.target.files[0]);
		console.log(base64);
		setValue('passportImg', base64);
	};
</script>

<div class="flex flex-col items-center mt-10">
	<div class="text-3xl font-bold mb-10">Profile</div>
	<form class="w-96" on:submit|preventDefault={onSubmit(handleSubmit)}>
		<div class="mb-10 flex flex-col">
			<Label id="name" label="Name" required />
			<input
				class="border-2 border-black rounded px-2"
				name="name"
				type="text"
				on:input={(e) => setValue('name', e.target.value)}
			/>
		</div>

		<div class="mb-10 flex flex-col">
			<Label id="country" label="Country" required />
			<input
				class="border-2 border-black rounded px-2"
				name="country"
				type="text"
				on:input={(e) => setValue('country', e.target.value)}
			/>
		</div>
		<div class="mb-10 flex flex-col">
			<Label id="dateOfBirth" label="Date Of Birth" required />
			<input
				class="border-2 border-black rounded px-2"
				name="dateOfBirth"
				type="date"
				on:input={(e) => setValue('dateOfBirth', e.target.value)}
			/>
		</div>
		<div class="mb-10 flex flex-col">
			<Label id="passportImg" label="Passport Image" required />
			<input
				name="passportImg"
				class="border-2 border-black rounded px-2"
				type="file"
				accept="image/*"
				on:input={(e) => onUploadFile(e)}
			/>
		</div>

		<input
			class="bg-blue-300 hover:bg-blue-500 focus:bg-blue-700 text-white rounded py-2 w-32"
			type="submit"
			title="Submit"
		/>
	</form>
</div>

Here it is. Thanks for replying.

is it working?

[davidkngo]

Hi, the problem is I need to pass an image file to the form instead of a fakepath. Other fields are working fine.
.
What I actually want to pass the form is just like the image below.