Using styleable input[type="file"] + bootstrap

Demonstrates a simple form wizard with webshim and bootstrap 3.x tabs. Free to use!

by AhmedHR

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://afarkas.github.io/webshim/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<form action="#" class="form-horizontal ws-validate">
   
    <div class="form-group">
        <label for="files" class="control-label">Files*</label>
        <div class="ws-custom-file">
	
	<input type="file" id="files" multiple="" required="" accept="image/*" />

	<!-- button and .ws-file-value for custom filepicker UI -->
	<button type="button" class="btn">Browse</button>
	<span class="ws-file-value form-control-static">...</span>
</div>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">submit</button>
    </div>
</form>

CSS

body {
    margin: 10px;
    padding: 10px;
}
form {
    max-width: 480px;
    margin: auto;
}
.form-group >[class*="col-"] + .ws-errorbox {
    padding: 0 15px;
}
.ws-file-value.form-control-static {
    padding-top: 5px;
}

JavaScript

(function () {
    webshims.setOptions('forms', {
        lazyCustomMessages: true,
        iVal: {
            sel: '.ws-validate',
            handleBubble: 'hide', // hide error bubble

            //add bootstrap specific classes
            errorMessageClass: 'help-block',
            successWrapperClass: 'has-success',
            errorWrapperClass: 'has-error',

            //add config to find right wrapper
            fieldWrapper: '.form-group'
        }
    });

    //load forms polyfill + iVal feature
    webshims.polyfill('forms');
})();