#How to Pass Image Files with React Hook Form and Zod to Server Action?

9 messages · Page 1 of 1 (latest)

whole dome
#

How do you pass image files using React Hook Form and Zod to Server Action? I keep encountering this error:
Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.
I just can’t figure out what’s causing it. Here’s the Zod schema for the image:

image: z .instanceof(File) .refine( (file) => ACCEPTED_IMAGE_TYPES.includes(file.type), Only the following image types are allowed: ${ACCEPTED_IMAGE_TYPES.join(', ')}. ) .optional() .nullable(),

My reacthookform setup:
const imageFile = new File([compressedFile], compressedFile.name, { type: compressedFile.type || file.type, });
setValue('image', file);

You can see the structure of an image file after compression in the picture.
By default, the compressedFile is a Blob, which is why I’m converting it into a File.

Any ideas on what format I should prepare the file in before submitting, so it’s accepted? I’d be incredibly grateful. This issue has caused me so much frustration. I’d be incredibly grateful for a working solution with zod, react-hook-form.

how-to-pass-image-files-with-react-hook-form-and-zod-to-v0-ug3i8rveza6e1.png
rigid novaBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

terse zinc
whole dome
#

Unfortunately, I don’t fully understand what you mean exactly. I tried sending the file configured and converted as a File in Zod, but it gave me an error. I also attached an image showing the structure of the file when logged in the console. These are the details in my post.

In the meantime, I managed to get a working solution locally, but on the server, it throws an error:
HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

Currently, I’m submitting two forms: one with the file (since it works locally this way) and another with the data. However, I’m starting to think that if nothing else works, I might need to split this into two separate actions: one to upload the file and return the data, and then another to submit everything again.

Here’s the submit section of my code:

`action={async () => {
// REACT HOOK FORMS
const result = await trigger();
if (!result) return;

const { image, ...formData } = getValues();
// console.log('values: ', formData);
const formDataImg = new FormData();
if (image) formDataImg.append('image', image, image.name);

const { error, success } = await createDishCategory(formData, formDataImg);
if (error) {
    toast.error(error);
} else {
    toast.success(success);
    reset();
    setIsOpen(false);
}

}}`
Someone on Reddit also recommended using zod-form-data, but unfortunately, I haven’t been able to get it to work. If anyone can provide an example for that, it would be greatly appreciated!

terse zinc
whole dome
#

That’s very kind of you to even make a video. Unfortunately, I’m using react-hook-form and zod for validation, and they don’t handle it as FormData in Next.js/React. So even if I write it as shown in the video, it still throws the error I mentioned.

terse zinc
#

even if you dont have access to FormData you can still pass File to server action

#

thats why im asking