/* BeejBløg */

Mar 1, 2016 - 1 minute read - Comments -

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 skinned button… this way when you click the pretty button you’re really clicking on the invisible native button which launches the file open dialog as usual, cool! :)
  • 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.