React Hook Form with file just submitting fakepath

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

Joris · Answer 1 · 2021-06-19T20:18:32.847

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;

We don't use the ```register``` with the recently update of ```useForm``` — myTest532 myTest532, Jun 21 '21 at 16:25
I gave you 2 solutions, one with `register` and another one with `useController` which is the same as `Controller`. — Joris, Jun 21 '21 at 16:55

score 2 · Answer 2 · answered Dec 15 '21 at 23:37

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;

React Hook Form with file just submitting fakepath

2 Answers2

Linked