react-hook-form-antd
react-hook-form-antd copied to clipboard
Error when using Upload component of antd within FormItem
When using the Upload component of antd as children of a FormItem and adding the valuePropName="fileList"
attribute to the FormItem, an error occurs after selecting an image. The error is the following:
and, if for example, I don't add the valuePropName="fileList"
attribute, I get the following error in the console:
It is important to say that the code works if I do not add the valuePropName="fileList"
attribute, but I would always have the error in the console.
Example of my code:
"use client";
import { SubmitHandler, useForm } from "react-hook-form";
import { Button, Form, Upload } from "antd";
import { UploadChangeParam } from "antd/lib/upload";
import { FormItem } from "react-hook-form-antd";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
const extensions = ["jpg", "jpeg", "png"];
const schema = z.object({
image: z
.custom<UploadChangeParam>()
.refine(({ file: { name: fileName } }) =>
extensions.some((ext) => fileName.includes(ext))
)
.optional(),
});
type TSchema = z.infer<typeof schema>;
export default function MyFormPage() {
const { control, handleSubmit } = useForm<TSchema>({
resolver: zodResolver(schema),
});
const onSubmit: SubmitHandler<TSchema> = (data) => {
console.log(data);
};
const normFile = (e: any) => {
if (Array.isArray(e)) {
return e;
}
return e?.fileList;
};
return (
<Form onFinish={handleSubmit(onSubmit)}>
<FormItem
control={control}
name="image"
valuePropName="fileList"
getValueFromEvent={normFile}
label="Image"
>
<Upload listType="picture-card">
+ Upload
</Upload>
</FormItem>
{/* Other fields */}
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
);
}
Also, I think the getValueFromEvent={normFile}
attribute does nothing.
Environment:
- Next.js version: 14.1.0
- Antd version: 5.14.2
- react-hook-form-antd version: 1.1.0
- react-hook-form version: 7.50.1
- hookform/resolvers version: 3.3.4
- Zod version: 3.22.4
- Browser: Chrome
I appreciate any guidance or solutions to address this issue. Thanks for your help!
mark
what's the update on this ?
what's the update on this ?
Sry kinda busy lately. PRs welcome for this issue. I'll review ASAP.
@jsun969 sure, I will give it a shot after few hours
this could allow expanding functionality, I tested it on our project, and it works great