setData on submitting is not working

[laduniestu]

Hi, how to setData before submiting form?

const submit = async (e) => {
    e.preventDefault()
    const canvas = await getCroppedImg(foto, croppedArea, rotate)
    const canvasDataUrl = canvas.toDataURL("image/jpg")
    const convertedUrlToFile = dataURLtoFile(canvasDataUrl, auth.user.name)
    setData('photo', convertedUrlToFile)
    post(route('bride.man_update'))
};

when i submit the form, the Photo data is not stored.
But when i submit again without refresh the page ( with same data from previous ) it will store.

[thejawker]

There's a transform function on the form that should work, however I haven't had success with it since it doesn't update in time. The solution that worked for me is the following:

const joined = {...data, ...additional};

// to update the form data for the inputs
setData(joined);

// use the inertia `router` instead of the `useForm` and supply the updated data
router.post('/endpoint', joined, {
    // now you also have to manually set and clear the errors
    onSuccess: () => {
        clearErrors();
    },
    onError: (errors) => {
        setError(errors);
    }
});

It's kind of backwards since you have to manually set the form data to sync the inputs as well as the errors, which kind of defeats the purpose of using useForm, but gets the job done.

Similar issue to: #1131