Pass form data to remote form function enhance callback

[PatrickG]

Describe the problem

It should be possible to mutate the form data in the remote form functions enhance callback like it is possible within the enhance action.

Describe the proposed solution

Pass a formData prop to the enhance callback function.

kit/packages/kit/src/runtime/client/remote-functions/form.svelte.js

Lines 100 to 104 in 19211c1

	await callback({
	form,
	data,
	submit: () => submit(form_data)
	});

should be:

				await callback({
					form,
					data,
+					formData: form_data,
					submit: () => submit(form_data)
				});

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[dummdidumm]

Mhm yeah possibly, else you cannot programmatically add new fields prior to sending it.

[SamuelCharpentier]

How would that work with preflight schema validation? Use a schema for the client preflight and a server schema with the added data? I’m asking because I would use this myself but I don’t see how if it fails preflight first. This mutation of the form data would need to take place before preflight in my opinion, but I might be missing something. I haven’t read source code.

[PatrickG]

@SamuelCharpentier The enhance callback is called after the preflight was successful.
Why do you need client-side validation for data that you yourself append to the form data?

[SamuelCharpentier]

For the simplicity of being able to use the same schema on both client and server. Either you have one schema for preflight without the validation of the additional data and then server side validation with another schema to make sure the added data is present before processing

[SamuelCharpentier]

I guess merging the client schema for server validation is also an option with something like v.object({…clientSchema.entries, addedDataPoint:v.string()}); to at least keep things DRY and consistent. Or use someting like v.omit(v.object({...formSchema), ['addedDataPoint']) as the preflight parameter I guess.

[andreasbhansen]

Chiming in to exemplify the need for this. Prior to remote functions, inside use:enhance I called a promise-based modal (mainmatter/svelte-promise-modals) where the user must select from a dropdown the reason for calling the form (think compliance). The result of the data from that modal was then formData.append('reason', reason) before finally being submitted.

I have attempted multiple ways of using the equivalent of
<form {...createAuditLogAndRetrieveHiddenData.for(user.id).enhance(...) where I inside the enhance get the value from the promise modal, then update a state rune with that value, then await tick()/delay, have that value in a hidden input field, then submit. But none of my attempts lead to the value of the hidden input field being added to the FormData as inspected in the network tab. Presumably, because the form data is already decided at that point and cannot be changed.

[SamuelCharpentier]

Another example of use for this is using a short lived token generation for origin and antibot validation like ReCAPTCHA. I can fill a hidden recaptcha field with the token value on load, but the form might get sent much later and the token will be expired by then, forcing the user to send it again with the refreshed token obtained ironically enough during the use:enhance callback.

[teemingc]

Any way to make this work with form.fields.my_field.set(...) in the callback function? Or do we only want mutations to the form data to take effect for the submission?

[SamuelCharpentier]

@teemingc, I just spent a few hours reading and editing locally the source of the remote form.

The way I read it, there's a function that handles when the submit is done using a button. If the button has specific attributes like a name and a value, the name and value is appended to the form_data generated from the form.

	const form_action_onclick = (callback) => {
			/** @param {Event} event */
			return async (event) => {
				const target = /** @type {HTMLButtonElement} */ (event.currentTarget);
				const form = target.form;
				if (!form) return;

				// Prevent this from firing the form's submit event
				event.stopPropagation();
				event.preventDefault();

				const form_data = new FormData(form);

				if (DEV) {
					const enctype = target.hasAttribute('formenctype')
						? target.formEnctype
						: clone(form).enctype;

					validate_form_data(form_data, enctype);
				}

				if (target.name) {
					form_data.append(target.name, target?.getAttribute('value') ?? '');
				}

				await handle_submit(form, form_data, callback);
			};
		};

If remote form was changed so the form_data was generated in the submit function that happens after preflight and after enhance, to keep the button name value appending, they'd need to pass the event.currentTarget (the button) down to the preflight and the enhance, and that value would't be evaluated or available during those steps.

[Rich-Harris]

There's a reason form data can't be mutated in the enhance callback: it means the form is broken if JS fails to load, in which case instead of being called myform.enhance(...) it should be called something like myform.makeItActuallyWork(...).

In some cases JS is an unavoidable requirement. If so, you have alternatives — for example you could do this sort of thing:

<form {...myform}>
  <!-- ... -->

  <button onclick={async (e) => {
    e.preventDefault();
    const form = e.currentTarget.form;

    await refreshToken();
    form.requestSubmit();
  }}>submit</button>
</form>

It does add a little bit of extra friction, but if it nudges people towards designs that work by default in the absence of JS, I'd argue that's a good thing.

Some things that do qualify as enhancements:

<form {myform.enhance(async ({ submit }) => {
  try {
    await submit().updates(
      // 1. optimistic updates
      somequery().withOverride(...)
    );

    // 2. feedback on successful submission
    confetti();
  } catch (e) {
    // 3. showing a toast, instead of an `+error.svelte` page
    showToast(e.message);
  }
})}>...</form>

[fehnomenal]

OK, my use case is this: My app allows uploading large files that are processed in the background. I need to send additional information and want to use remote forms but not read the whole file into memory like .formData() does.
So I split uploading and posting the form:

1. In the enhance callback, post file (via xhr for progress reports) to a server endpoint, say /upload-file. The handler uses busboy to parse the request body, saves the uploaded in a temporary location and returns the path to the file:

// src/routes/upload-file/+server.ts
export const POST = (async (event) => {
  const target = path.resolve(TEMP_FILE_UPLOAD_DIR, 'tmp', nanoid());

  const bb = busboy({
    headers: Object.fromEntries(event.request.headers.entries()),
  });

  bb.once('file', (_, file) => {
    mkdirSync(dirname(target), { recursive: true });

    file.pipe(createWriteStream(target));
  });

  await event.request.body?.pipeTo(Writable.toWeb(bb));

  return json(target);
}) satisfies RequestHandler;

2. After posting the form data entry is replaced with the returned path. I do this in a trycatch to just skip replacing if something fails. Finally submit() is called with the path in the happy case or otherwise the file object. So without JS the form still works.
3. The remote form has the following schema in the most simple case: v.object({ file: v.union([v.string(), v.file()]) }). The function body then decides with an data.file instanceof File check how to proceed.