search

Availity / availity-reactstrap-validation

Easy to use React validation components compatible for reactstrap.
https://availity.github.io/availity-reactstrap-validation/
MIT License
191 stars 70 forks source link

File Input #153

Open artemportnoy opened 5 years ago

artemportnoy commented 5 years ago

Hi,

I've scoured the web trying to find an example of making validation work for reactstrap's CustomInput of type "file" in AvForm and came back empty handed. My guess is I'm supposed to make use of AvField for this, but how? Is this at all supported?

Thanks, Artem

GoPro16 commented 5 years ago

Check out our Upload component and how we wrote it. https://github.com/Availity/availity-react/tree/master/packages/upload

Essentially we create the CustomInput tag and hide it from the DOM. Then we create our own button that we can customize to look like a button for uploading we want.

https://github.com/Availity/availity-react/blob/master/packages/upload/FilePickerBtn.js#L29-L39

artemportnoy commented 5 years ago

Thank you, I think I'm on the right path but still facing some issues. Trouble is the error message passed to the callback in the custom validate function is not showing up. Also, validation method gets called as soon as the form renders so the field is in error state even before the user had a chance to enter something.

I've created a sandbox to demo the problem https://codesandbox.io/s/availity-custominput-file-rp4v2

Thanks!

GoPro16 commented 5 years ago

Maybe this will help you out a little bit: https://codesandbox.io/s/availity-custominput-file-qxjix

You can't control the state of the file input so you can fake it like we do.