Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Couldn't figure out how to make this work with a file input #7

Open
web-dev-sayantan opened this issue Oct 11, 2024 · 2 comments
Open

Comments

@web-dev-sayantan
Copy link

The library makes the react-hook-form with next-safe-actions usage a lot simpler. Thanks a ton for this.
However, I'm not able to use file input with the setup provided in the examples.
I'm using react-dropzone along with react-hook-form to get the image from the user and validate it against my zod schema and the react-hook-form control for the file contains the File Object. Yet, onSubmit I'm gettingt the following error:
"Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported."

My zod schema:

const formSchema = z.object({
  bannerForDesktop: z
      .instanceof(File, { message: 'Upload a banner suitable for desktop view.' })
      .refine(file => file.size <= MAX_IMAGE_SIZE, {
        message: `Image size must be less than ${
          MAX_IMAGE_SIZE / 1024 / 1024
        }MB.`,
      })
      .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
        message: `Image types allowed: ${ACCEPTED_IMAGE_TYPES.join(', ')}.`,
      })
      .optional()
      .nullable(),
})

The formSubmission part:

  const {
      form,
      action: { isExecuting },
      handleSubmitWithAction,
      resetFormAndAction,
    } = useHookFormAction(createEventAction, zodResolver(eventFormSchema), {
      formProps: {
        mode: 'onChange',
        defaultValues: {
          bannerForDesktop: null
        },
        },
      },
      actionProps: {
        onSuccess: () => {
          toast({
            title: 'Form submitted successfully',
          })
          resetFormAndAction()
        },
      },
    })

The part where I connect it to the Form:

  <Form {...form}>
      <form
        onSubmit={handleSubmitWithAction}
        className='grid gap-4 md:w-full'
      >
          ...
          ...
      </form>
  </Form>

The file object that is attached to the formObject and validates properly against the zod schema in browser:
image

Let me if any other context is needed.

@TheEdoRan
Copy link
Contributor

Are you using Node.js < 20 (18) perhaps?

@reactivesilicon
Copy link

I'm using node v22.8.0 and getting same result, a working example with files would be really helpful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants