2

I have a form built as functional component using Material ui which contains markups like below

<form className={classes.container} onSubmit={show}>
<Grid container item xs={12} alignItems="center">
  <input
   accept=".xlsx,.xls"
   className={classes.input}
   id="text-button-file"
   required
   multiple
   type="file"
   onChange={getfileToUpload}
/>
  <Button type= "submit" className={classes.reTest}>
    Show
  </Button>
</Grid>
</Form>

Now, in my container component, i want to validate if file is really uploaded or not, if not then want to display a validation error message that "Please upload file", but at present if file is not available its giving error as "An invalid form control with name='' is not focusable" in console. Below is my validation function.

valid = () => {
    debugger;
    if (!this.state.fileName) {
        return false;
    }
    else{
        return true;
    }
}

What's wrong here? How to use file upload inbuilt validation?

Thriggle
  • 7,009
  • 2
  • 26
  • 37
Lara
  • 2,821
  • 7
  • 39
  • 72

1 Answers1

0

I would suggest you to add name attribute your input field

     <input
   accept=".xlsx,.xls"
   className={classes.input}
   id="text-button-file"
   name='file-input'
   required
   multiple
   type="file"
   onChange={getfileToUpload}
/>

You can also refer to this link : An invalid form control with name='' is not focusable

Aarti Kanwar
  • 31
  • 3