Upload file using react hook form in version 7?-CodePudding

I am using to react-hook-form to create a signup form in next js. I am using v7. But I am facing one new problem to upload file. Here is my form component. I find many solution for version 6. But I am hungry in version 7.

import React from "react";
import {useForm} from "react-hook-form";

function Test() {
    const {register, handleSubmit} = useForm();
    const onSubmit = (data) => {
        console.log(data);
    };
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register} type="file" name="picture"/>
            <button>Submit</button>
        </form>
    );
}

export default Test;

But In console I get only an empty object. Like the following images

Here, Where is my filelist or my fileinfo? How can I solve it. Please help.

Here is codeSandBox Link- https://codesandbox.io/s/youthful-glade-d4kq8

Please do not close my question. Please help me.

CodePudding user response：

It is very simple. You have to write

{...register("picture")}

and remove the name attribute.

So change your code

function Test() {
    const {register, handleSubmit} = useForm();
    const onSubmit = (data) => {
        console.log(data);
    };
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register("picture")} type="file"/>
            <button>Submit</button>
        </form>
    );
}