Knockout, Validation, Bootstrap skinned File Input

 

Visual example:


 
Highlights:

  • 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.
     
     

Live Demo:

See the Pen Knockdown, Validated, Bootstrap skinned File Input by Brent Anderson (@Beej2020) on CodePen.