Update value in form on input value change

[Hobbitive]

Hi,
I have input in form that uploads image to bucket and I want to store in form data the url to this img.
I checked the docs of superforms, formsnap and shadcn form and didn't find anything helpful.

I builded form the same way as shadcn-svelte docs reccomend.

<Form.Field {config} name="image">
		<Form.Item>
			<Form.Label>Image</Form.Label>
			<Input type="file" on:change={handleUpload} />
			<Form.Validation />
		</Form.Item>
	</Form.Field>

in the handleUpload i handle uploading of image and there i want somehow to write a value to image field
I know that i am using normal Input not Form.Input here. i can swap it easly

[Hobbitive]

I found solution for that

you expose setValue function from Form.Field and pass it to you handler invoked by onChange
and within the handler you set the value using exposed setValue

<Form.Field {config} name="image" let:setValue>
		<Form.Item>
			<Form.Label>Zdjecie</Form.Label>
			<Input type="file" on:change={(e) => handleUpload(e, setValue)} />
			<Form.Validation />
		</Form.Item>
</Form.Field>

[Hobbitive]

After testing my solution, submitting form is clearing image field and not passing it to +page.server.ts action.

So question is still open

[Hobbitive]

Found another solution

You need to add Form.Input with hidden class, so that it will properly set value

<Form.Field {config} name="image" let:setValue>
		<Form.Item>
			<Form.Label>Zdjecie</Form.Label>
			<Input type="file" on:change={(e) => handleUpload(e, setValue)} />
			<Form.Input class="hidden" />
			<Form.Validation />
		</Form.Item>
	</Form.Field>