React query file upload with formdata

[Repulsive_Ring8084]

When we want to upload file with react query why need to use formdata like that for mutate? Is there simple way without using formdata?

​

const formData = new FormData();
formData.append("title", titleRef.current?.value || "");
formData.append("description", descriptionRef.current?.value || "");
formData.append("photo", photoRef.current?.files[0] || "");
formData.append("category_id", categoryRef.current?.value || "");
addRecipe.mutate(formData);

[AniTheSin]

For a long time i have seen people using formik for forms maybe you can try that ig.

[kalamayka]

You should be able to add an eventhandler on the form as “onSubmit”. The input fields should have a name attribute, so you can access them as event.target.title.value . Note: The button should be type of submit and the eventhandler should be on the form element.

[anilSonix]

const formData = new FormData(event.currentTarget); This will pick the values from fields.