React Hook Form with file just submitting fakepath - reactjs

Question

I'm trying to add an <Input type="file" to my react-hook-form, but it submit a C:\fakepath when I submit the form.
import React from "react";
import { Controller, useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";
const App = () => {
const {
handleSubmit,
control,
setValue,
formState: { errors }
} = useForm();
const submitData = (data) => {
console.log(data);
};
return (
<div className="row">
<div className="col-sm-12 col-md-12 col-xl-12">
<Form onSubmit={handleSubmit(submitData)}>
<div className="row">
<div className="col-sm-6">
<Label for="file">File</Label>
<Controller
name="file"
control={control}
render={({ field }) => (
<Input {...field} type="file" id="file" />
)}
/>
</div>
</div>
<Button type="submit" color="primary">
Submit
</Button>
</Form>
</div>
</div>
);
};
export default App;
Here is the sandbox: https://codesandbox.io/s/morning-water-hyi9o
How can I use files with react-hook-form?
Thanks

Answer 1

You can find a solution here: https://github.com/react-hook-form/react-hook-form/discussions/5394#discussioncomment-848215
Here is another way to achieve that with register:
import React from "react";
import { useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";
const App = () => {
const { register, handleSubmit } = useForm();
const submitData = (data) => {
console.log(data);
};
const { ref, ...field } = register("file");
return (
<div className="row">
<div className="col-sm-12 col-md-12 col-xl-12">
<Form onSubmit={handleSubmit(submitData)}>
<div className="row">
<div className="col-sm-6">
<Label for="file">File</Label>
<Input {...field} innerRef={ref} type="file" id="file" />
</div>
</div>
<Button type="submit" color="primary">
Submit
</Button>
</Form>
</div>
</div>
);
};
export default App;

Answer 2

I had the same problem and I solved it by changing the object data.file = e.target.file.files in the onSubmit as follows:
import React from "react";
import { Controller, useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";
const App = () => {
const {
handleSubmit,
control,
setValue,
formState: { errors }
} = useForm();
const submitData = (data, e) => {
data.file = e.target.file.files
console.log(data);
};
return (
<div className="row">
<div className="col-sm-12 col-md-12 col-xl-12">
<Form onSubmit={handleSubmit(submitData)}>
<div className="row">
<div className="col-sm-6">
<Label for="file">File</Label>
<Controller
name="file"
control={control}
render={({ field }) => (
<Input {...field} type="file" id="file" />
)}
/>
</div>
</div>
<Button type="submit" color="primary">
Submit
</Button>
</Form>
</div>
</div>
);
};
export default App;