React Hook Form and Input type file

Question

I'm trying to use an input type file with a React Hook Form.

import { Controller, useForm } from "react-hook-form";
import {
    Button,
    Form, FormText,
    Label,
    Input,
} from 'reactstrap';

const Test = () => {
  
  const { handleSubmit, control, setValue, formState: { errors }} = useForm();

  // I have other inputs and divs. Just showing the file here
  return (
     <Controller
        name="file"
        control={control}
        render={({ field }) => (
           <Input {...field} type="file" id="file" />
        )}
     />
  );
}

When I submit the form and check the data.file it has only: C:\fakepath\myFile.pdf

const submitForm = (data) => {
   console.log(data.file);
}

Here is a solution: https://stackoverflow.com/questions/68038076/react-hook-form-with-file-just-submitting-fakepath — Joris, Jun 20 '21 at 12:29

score 2 · Accepted Answer · answered Dec 01 '22 at 23:13

I hope it's not too late.

I custom onChange of react-hook-form to pass value and name.

   <Controller
      name="profilePath"
      control={control}
      render={({ field }) => (
        <ImgUpload
          src={
            !field.value
              ? userSvg
              : field.value instanceof File
              ? URL.createObjectURL(field.value)
              : field.value
          }
          onChange={(e) =>
            field.onChange({ target: { value: e.target.files[0], name: field.name } })
          }
        />
      )}
    />

React Hook Form and Input type file

1 Answers1