Re-usable input file with react-hook-form logic

Question

I'm trying to build a reusable input file as per below.

function InputFileControl({ control, name, initialValue, ...rest }) {
  const {
    field: { ref, ...inputProps },
    fieldState: { invalid, error, isTouched },
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: initialValue,
  })
  return (
    <StyledGrid>
      <Grid item container>
        <input {...inputProps} inputRef={ref} {...rest} />
      </Grid>
      <Collapse in={invalid}>
        <Grid item container>
          <StyledAlert severity="error">{error && error.message}</StyledAlert>
        </Grid>
      </Collapse>
    </StyledGrid>
  )
}

For usage, where my form is declared, this is how i'm using it:

<InputFileControl control={control} name="file" type="file" />

Unfortunately, It is not working. When i submit the form, the file is only the path. There is no files[0] to manage.

What can I try next?

score 0 · Answer 1 · answered Jun 20 '21 at 12:41

0

I guess you get something like C:\\fakepath\<filename>

Here is a possible solution: React Hook Form with file just submitting fakepath

answered Jun 20 '21 at 12:41

Joris

2,416
13
18

Exactly. i was getting that C:\\fakepath\ . With you help i found the solution here: [link] https://codesandbox.io/s/long-sun-nsfbk?file=/src/App.js:379-480 [/link] . Now it woks fine. Thanks a lot Joris. – Valery Mbele Jun 20 '21 at 17:48

Re-usable input file with react-hook-form logic

1 Answers1