How to implement before-submit functionality with Formily?

[ghost]

Hello Formily community,

First of all, we’d like to express our sincere appreciation for the excellent work you’ve done on Formily and for making it available as open source. We’ve been working with Formily v2.x for a few weeks now, using JSON schemas and developing custom React components. We’re genuinely impressed by the flexibility and developer experience your framework provides.

Below is a simplified example demonstrating how we're trying to integrate a custom signature capture component using Formily’s hooks and lifecycle events. But it seems that there's no beforeSubmit event.

Our signature workflow is as follows:

1. The user draws a signature in the canvas.
2. The canvas data is converted to a suitable format.
3. The converted data is uploaded asynchronously to our media endpoint via a POST request.
4. The endpoint responds with a URI (for example, something like /media/01970bb0-7e86-771b-92aa-e1ecb1bef739), which we then add to the form’s values.

This async upload ensures that the signature is safely stored and referenced in the form data before the actual form submission completes.

Here is a simplified example of our implementation:

import React, { useEffect, useRef, useState } from "react";
import { observer, useField, useForm } from "@formily/react";
import { Field } from "@formily/core";
import SignatureCanvas from "react-signature-canvas";
import clsx from "clsx";

interface SignatureProps {
  className?: string;
  canvasSize?: [number, number];
}

export const CustomSignatureComponent = observer((props: SignatureProps) => {
  const field = useField<Field>();
  const form = useForm();
  const sigCanvas = useRef<SignatureCanvas>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [hasUploaded, setHasUploaded] = useState(false);
  const canvasSize = props.canvasSize || [500, 500];

  useEffect(() => {
    const EFFECT_ID = `signature-upload-before-submit`; // We are aware that this should also be unique when using multiple signature fields.
    form.addEffects(EFFECT_ID, () => {
      form.beforeSubmit(async () => { // <- This is what we're trying to do, but there is no beforeSubmit() hook
        
        // Logic for uploading the signature
        
        if (!sigCanvas.current || sigCanvas.current.isEmpty()) return;
        setIsUploading(true);

        try {
          // ... upload logic ...
        } catch (error) {
          // ... error handling ...
        } finally {
          setIsUploading(false);
        }
      });
    });
    return () => {
      form.removeEffects(EFFECT_ID);
    };
  }, [form, field]);

  // ...rest of the component logic
});

The question is: What's the best way of implementing such "before submit" logic?