Append extra data in FormData

[NormandoHall]

I have a form and I want to add reCaptcha token, but this token is generated when the user click the submit button. I can't await for reCaptcha, and of course I can't append the token data. This is my code for reCaptcha V3

  <form
    class="space-y-6"
    action="?/login"
    method="POST"
    use:enhance={({ data }) => {
      console.log('1');

      grecaptcha.ready(function () {
        grecaptcha.execute(PUBLIC_RECAPTCHA_SITE_KEY, { action: 'submit' }).then(function (t) {
          console.log('2');
          data.append('token', t);
        });
      });

      console.log('3');

      return async ({ result }) => {
        await invalidateAll();
        await applyAction(result);
      };
    }}
  >

    <input..../>
    <input.../>

    <button type="submit">Submit>/button>
  </form>

I get console log 1, 3, 2.

Thanks

[teemingc]

Does this work?

  <form
    class="space-y-6"
    action="?/login"
    method="POST"
-    use:enhance={({ data }) => {
+   use:enhance={ async ({data}) => {
      console.log('1');

+  const captcha = new Promise((resolve) => {
      grecaptcha.ready(function () {
        grecaptcha.execute(PUBLIC_RECAPTCHA_SITE_KEY, { action: 'submit' }).then(function (t) {
          console.log('2');
          data.append('token', t);
+        resolve();
        });
      });
+   });
+   await captcha;
      console.log('3');

      return async ({ result }) => {
        await invalidateAll();
        await applyAction(result);
      };
    }}
  >

    <input..../>
    <input.../>

    <button type="submit">Submit>/button>
  </form>

[NormandoHall]

Well, I tested, and runs in sequence correctly, but I can't add the extra parameter because when you call await x you are in the return function, after send the form, not before send.

[NormandoHall]

So, I can workaround this issue of course, using a legacy endpoint API server.js, but the idea is to use enhanced forms. I think this is an issue, because we can't stop or delay the form sending, only cancel().

[teemingc]

https://kit.svelte.dev/docs/form-actions#progressive-enhancement-custom-event-listener

This might be the best solution for you. You can still use form actions, but you have to define your own "enhance" function.
This gives you more fine-grained control of when the form is submitted. Also note that the function is async now.

<script lang="ts">
  import { invalidateAll, goto } from '$app/navigation';
  import { applyAction } from '$app/forms';

  import type { ActionData } from './$types';
  import type { [ActionResult](https://kit.svelte.dev/docs/types#sveltejs-kit-actionresult) } from '@sveltejs/kit';

  export let form: ActionData;

  let error: any;

  async function handleSubmit(event) {
    const data = new FormData(this);

    // await your recaptcha stuff here and append token to form data.

    const response = await fetch(this.action, {
      method: 'POST',
      body: data
    });

    const result: [ActionResult](https://kit.svelte.dev/docs/types#sveltejs-kit-actionresult) = await response.json();

    if (result.type === 'success') {
      // re-run all `load` functions, following the successful update
      await invalidateAll();
    }

    applyAction(result);
  }
</script>

<form method="POST" on:submit|preventDefault={handleSubmit}>
  <!-- content -->
</form>

[NormandoHall]

Thanks @s3812497 Tee. Runs ok.

I think must be described in documentation about it can't be async, for clarification to newcomers. Or better, one day make it async! xD

Regards!

[teemingc]

@NormandoHall thanks to your discovery, managed to submit a PR so that async functions are now allowed for enhance