react-hook-form: Failed to set the 'value' property on 'HTMLInputElement'

Question

I am trying to use react hook form for user input to upload file

import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import {
  Col,
  Row,
  Form,
  FormGroup,
  InputGroup,
  Input,
  Container,
  Button
} from "reactstrap";

export default function App() {
  const onSubmit = (data) => {
    console.log(data);
  };

  const { control, handleSubmit } = useForm();

  return (
    <Container>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Row className="m-3">
          <Col>
            <FormGroup row className="mr-md-1">
              <InputGroup className="mb-3">
                <Controller
                  name="itemlist2"
                  control={control}
                  render={({ field: { ref, ...field } }) => (
                    <Input
                      {...field}
                      type="file"
                      required
                      innerRef={ref}
                      onChange={(e) => {
                        field.onChange(e.target.files);
                      }}
                    />
                  )}
                />
              </InputGroup>
            </FormGroup>
          </Col>
        </Row>
        <Button color="primary" className="mr-1">
          {"Save Changes"}
        </Button>
      </Form>
    </Container>
  );
}

Check on https://codesandbox.io/s/affectionate-moon-dmn8q

I get

score 0 · Accepted Answer · answered Dec 08 '21 at 20:28

I'm not very familiar with reactstrap, but i think you have to omit the value prop which is part of field. You can’t set the value of an input with type="file". Check this answer for more infos.

<Controller
  name="itemlist2"
  control={control}
  render={({ field: { value, ...field } }) => (
    <Input
      {...field}
      type="file"
      required
      innerRef={field.ref}
      onChange={(e) => {
        field.onChange(e.target.files);
      }}
    />
  )}
/>

score 0 · Answer 2 · answered Dec 09 '21 at 13:34

The issue is due to the fact that you are using a controlled input and not passing value to render it out on onSubmit.

Use { field: { value, ...field } } as props to the render method and it will set the 'value' property on 'HTMLInputElement' otherwise it will only pass an empty string which is in conflict with a file type data. It should be like this <input type="file" value="c:/js.txt"/> but you are doing like this <input type="file"/>

Complete Code:

import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import {
  Col,
  Row,
  Form,
  FormGroup,
  InputGroup,
  Input,
  Container,
  Button
} from "reactstrap";

export default function App() {
  const onSubmit = (data) => {
    console.log(data);
  };

  const { control, handleSubmit } = useForm();

  return (
    <Container>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Row className="m-3">
          <Col>
            <FormGroup row className="mr-md-1">
              <InputGroup className="mb-3">
                <Controller
                  name="itemlist2"
                  control={control}
                  render={({ field: { value, ...field } }) => (
                    <Input
                      {...field}
                      type="file"
                      required
                      innerRef={field.ref}
                      onChange={(e) => {
                        field.onChange(e.target.files);
                      }}
                    />
                  )}
                />
              </InputGroup>
            </FormGroup>
          </Col>
        </Row>
        <Button color="primary" className="mr-1">
          {"Save Changes"}
        </Button>
      </Form>
    </Container>
  );
}

react-hook-form: Failed to set the 'value' property on 'HTMLInputElement'

2 Answers2