How to use input type file in Form?

[zwl1619]

there is an Form example in docs here:
https://ui.shadcn.com/docs/components/input#form
And it's input type is text. I want to use input type file in Form, I tried to write the code like this:

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"


const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
const FormSchema = z.object({
    images: z.any()
        .refine(files => {return Array.from(files).every(file => file instanceof File)}, { message: "Expected a file" })
        .refine(files => Array.from(files).every(file => ACCEPTED_IMAGE_TYPES.includes(file.type)), "Only these types are allowed .jpg, .jpeg, .png and .webp")
})


export default function TextareaForm() {
    const form = useForm({
        resolver: zodResolver(FormSchema)
    })

    function onSubmit(data) {
        console.log(data);
    }

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
                <FormField
                    control={form.control}
                    name="images"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>images</FormLabel>
                            <FormControl>
                                <Input type="file" multiple {...field} />
                            </FormControl>
                            <FormDescription>
                                upload images.
                            </FormDescription>
                            <FormMessage />
                        </FormItem>
                    )}
                />
                <Button type="submit">Submit</Button>
            </form>
        </Form>
    )
}

there is an error:

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. 

What should I do?

[zeekrey]

I encountered the same issue, and I've submitted my PR to address it. You can find it here: GitHub PR. To resolve the problem, follow these steps:

When utilizing <Input type="file" /> alongside React Hook Form, it is important to have an uncontrolled input. You can achieve this by simply passing the onChange handler to the onChange prop of the input element.

<FormField
  control={form.control}
  name="picture"
  render={({ field: { value, onChange, ...fieldProps } }) => (
    <FormItem>
      <FormLabel>Picture</FormLabel>
      <FormControl>
        <Input
          {...fieldProps}
          placeholder="Picture"
          type="file"
          accept="image/*, application/pdf"
          onChange={(event) =>
            onChange(event.target.files && event.target.files[0])
          }
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

[6abotage]

@joshgalvan, you're destructuring the field object render={({ field: { value, onChange, ...fieldProps } }) and you're keeping the value from being passed on to the input, so the Input becomes uncontrolled instead of controlled. With react-hook-form and in general inputs of type file have to be uncontrolled for security concerns

[sp88011]

What the zod schema you're using that is working with your example?

[vamshimorlawar]

Could you please post an example with Zod schema and form filed?
Thank you! @zeekrey

[sahmed007]

Here is the schema I used with the above code and it worked:

export const schema = z.object({
  resume: z.instanceof(File).refine((file) => file.size < 7000000, {
    message: 'Your resume must be less than 7MB.',
  }),
});

The only thing I added to the formfield was this to suppress the TS warning:

<FormField
  control={form.control}
  name="resume"
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  render={({ field: { value, onChange, ...fieldProps } }) => (
    <FormItem>
      <FormLabel>Resume</FormLabel>
      <FormControl>
        <Input
          {...fieldProps}
          type="file"
          accept="application/pdf"
          onChange={(event) =>
            onChange(event.target.files && event.target.files[0])
          }
        />
      </FormControl>
      <FormDescription />
      <FormMessage />
    </FormItem>
  )}
/>

[jrnxf]

@sahmed007 you might be interested in this eslint rule "@typescript-eslint/no-unused-vars": ["error", { ignoreRestSiblings: true }],!

[harish-khandre]

i took this approach but server actions is causing error :

Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

and if i serialize by doing this :

const onSubmit = (values: z.infer<typeof OnBoardingSchema>) => {
   setError("");
   setSuccess("");

   console.log(values);

    const data = JSON.parse(JSON.stringify(values));

   startTransition(() => {
     onboarding(data).then((result) => {
       setError(result.error);
       setSuccess(result.success);
     });
   });
 };

then image is empty as it is a complex object in the backend. I don't have any idea I'm new to it so please help

[tanvir0604]

I am having same problem. Did you found any solution?

[tanvir0604]

@harish-khandre I have found the solution. You need to send data as FormData.

const onSubmit = (values: z.infer<typeof OnBoardingSchema>) => {
   setError("");
   setSuccess("");

   console.log(values);

    const data = JSON.parse(JSON.stringify(values));
    let formData = new FormData();
    formData.append('name', values.name);
    formData.append('image', values.image);


   startTransition(() => {
     onboarding(formData).then((result) => {
       setError(result.error);
       setSuccess(result.success);
     });
   });
 };

In server action

export async function onboarding(values: FormData): {} {
    let data = Object.fromEntries(values.entries());
    const validated = OnBoardingSchema.safeParse(data);
    if(!validated.success){
        return { type: 'error', msg: 'some error message' };
    }
}

[51fe]

@harish-khandre using node 20x is ok on my PC