react-hook-form-antd icon indicating copy to clipboard operation
react-hook-form-antd copied to clipboard

Error when using Upload component of antd within FormItem

Open yorman2401 opened this issue 11 months ago โ€ข 1 comments

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:

image

and, if for example, I don't add the valuePropName="fileList" attribute, I get the following error in the console:

image

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!

yorman2401 avatar Mar 11 '24 19:03 yorman2401

mark

kkfive avatar Mar 13 '24 01:03 kkfive

what's the update on this ?

ahmedrowaihi avatar Jun 24 '24 07:06 ahmedrowaihi

what's the update on this ?

Sry kinda busy lately. PRs welcome for this issue. I'll review ASAP.

jsun969 avatar Jun 24 '24 08:06 jsun969

@jsun969 sure, I will give it a shot after few hours

ahmedrowaihi avatar Jun 24 '24 08:06 ahmedrowaihi

this could allow expanding functionality, I tested it on our project, and it works great

overrideFieldOnChange

ahmedrowaihi avatar Jun 24 '24 10:06 ahmedrowaihi