React Hook Form with file just submitting fakepath

[perazzo]

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;

[bluebill1049]

https://codesandbox.io/s/long-sun-nsfbk?file=/src/App.js

import * as React from "react";
import { useController, useForm } from "react-hook-form";
import Headers from "./Header";
import "./styles.css";

let renderCount = 0;

const FileInput = ({ control, name }) => {
  const { field } = useController({ control, name });
  const [value, setValue] = React.useState("");
  return (
    <input
      type="file"
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
        field.onChange(e.target.files);
      }}
    />
  );
};

export default function App() {
  const { register, handleSubmit, control } = useForm();
  const onSubmit = (data) => console.log(data);
  renderCount++;

  return (
    <div>
      <Headers
        renderCount={renderCount}
        description="Performant, flexible and extensible forms with easy-to-use validation."
      />

      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} placeholder="First Name" />
        <FileInput name="file" control={control} />
        <input type="submit" />
      </form>
    </div>
  );
}

[luccasr73]

Can explain why we need to do this to input file return files?

[luccasr73]

and why not use a full controlled input instead it

[luccasr73]

I made this with setValue and registered field https://codesandbox.io/s/sample-using-react-hook-form-with-input-file-3s8l7