- Skinning the native html <input type=”file”> by setting it’s opacity=0 and positioning above a bootstrap looking button… this way when you click the pretty button you’re really clicking on the invisible native button which launches the file open dialog.
- Bootstrap input-group aesthetically bundles the visual elements – file button, filename box, valiation message and clear button
- Knockout Custom Binding on the file input change event to save into VM observable
- Knockout-Validation lib to require selected file to be an image type – nice thing here is keeping that logic in the js ViewModel vs dirtying the html with it.
See the Pen Knockdown, Validated, Bootstrap skinned File Input by Brent Anderson (@Beej2020) on CodePen.