Using remote forms + enhance is it possible to modify a form value before its sent to the server?

[paulhahayes]

const { title, canvasJSON, entitiesJSON} = saveLabel.fields

</script>

<ActionForm
	bind:open={ls.dialogs.save}
	actionId={ACTION_IDS.app.label.save}
	>
<form
	{...saveLabel.enhance(async ({ data, submit, form }) => {
		const serialised =  designEngine.seraliseCanvas();
		// update form 
		await submit();
	})}
>

I have a very basic form where I basically just ask the user to enter a title. This would then trigger a snapshot save of a fabric js canvas which i then want to submit to my server to save. I can do this very easily with a command. But I am wondering before I abandon forms is it possible to achieve this using them.

e.g via command I can do:

	  async saveCanvas(title: string): Promise<void> {
    const canvasJSON = JSON.stringify(
      canvasRegistry.get().map((c) => c.toJSON()),
    );
    const entitiesJSON = JSON.stringify(Array.from(this.entities.entries()));
		return { canvasJSON, entitiesJSON };

		//
    await fromBackend(saveLabelCommand({ title, canvasJSON, entitiesJSON })).match(
      () => showSuccessToast("Successfully saved canvas"),
      (e) => showError(e),
    );

[tamish-max]

Yes — this is a good use case for enhance. The trick is to mutate the FormData before calling submit().

With the plain SvelteKit API it looks like this:

<form
  use:enhance(({ formData, submit }) => {
    formData.set('title', title);
    formData.set('canvasJSON', JSON.stringify(canvasRegistry.get().map((c) => c.toJSON())));
    formData.set('entitiesJSON', JSON.stringify([...entities.entries()]));

    return submit({ formData });
  })
>

If your helper exposes data instead of formData, same idea:

data.set('canvasJSON', serialised)
data.set('entitiesJSON', entitiesJSON)
await submit()

I’d usually pair this with hidden fields as a fallback, so the server action still has a predictable schema:

<input type="hidden" name="canvasJSON" />
<input type="hidden" name="entitiesJSON" />

So no, you don’t need to abandon forms here. Forms + enhance are a good fit as long as the extra payload can be serialized into FormData right before submission.

[mg1986jp]

Yeah, you can do this with SvelteKit's enhance — you just need to set the form data before calling submit():

<form
  method="POST"
  action="?/save"
  use:enhance={({ formData, cancel }) => {
    const serialised = designEngine.seraliseCanvas();
    formData.set('canvasJSON', JSON.stringify(
      canvasRegistry.get().map(c => c.toJSON())
    ));
    formData.set('entitiesJSON', JSON.stringify(
      Array.from(entities.entries())
    ));
    
    // don't cancel — let the form submit with the modified data
    return async ({ result }) => {
      // handle result
    };
  }}
>
  <input type="text" name="title" />
  <button type="submit">Save</button>
</form>

The formData parameter in the enhance callback is a standard FormData object that you can modify before the submission happens. You can .set(), .append(), or .delete() entries. The modified formData is what gets sent to the server.

You don't need hidden inputs for canvasJSON and entitiesJSON — just inject them into formData in the enhance callback. On the server side, your form action receives them normally:

// +page.server.ts
export const actions = {
  save: async ({ request }) => {
    const data = await request.formData();
    const title = data.get('title');
    const canvasJSON = data.get('canvasJSON');
    const entitiesJSON = data.get('entitiesJSON');
    // save to DB
  }
};

One thing to watch: if your canvas data is large (multiple MB), form submissions might be slow. In that case the command pattern you already have is probably better since you can add progress indicators, streaming, etc. But for normal-sized payloads, this works fine.

[teemingc]

The question is about remote functions rather than the older form actions API

[teemingc]

See #14477 (comment)