public
Last active

Pretty 'input[type="file"]' for Bootstrap addicts

  • Download Gist
nice_file_field.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Use:
// <input class="nice_file_field" type="file" data-label="Choose Document">
// <script> $(".nice_file_field").niceFileField(); </script>
//
(function( $ ) {
$.fn.niceFileField = function() {
this.each(function(index, file_field) {
file_field = $(file_field);
var label = file_field.attr("data-label") || "Choose File";
 
file_field.css({"display": "none"});
file_field.after("<div class=\"input-group nice_file_field\"><input class=\"form-control\" type=\"text\"><span class=\"input-group-btn\"><button class=\"btn btn-default\" type=\"button\">" + label + "</button></span></div>");
 
var nice_file_field = file_field.next(".nice_file_field");
nice_file_field.find("button").click( function(){ file_field.click() } );
file_field.change( function(){
nice_file_field.find("input").val(file_field.val());
});
});
};
})( jQuery );

Thanks for posting this.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.