Because the underlying input isn't touched, HTML5 form validation (for browsers that support it) continues to work.
Separation of concerns is achieved by utilising pseudo-elements and their content
CSS property. The internationalised label text is added to the data-ffi-button-text
data attribute on the ffi element (the parent of the input). You can also customise the text pattern for when multiple files are selected by adding it to a data attribute called data-ffi-multipleFileTextPattern
.
Styling the file inputs to match other popular UI libraries is easy.