Heads up! These docs are for v1.0.6, which is no longer officially supported. Check out the latest version of Bootstrap Filestyle!
Get Bootstrap Filestyle
Browser Support
Suport IE 8+
Description
The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.
This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.
Requirements
Twitter Bootstrap and jQuery.
Get Start
Include:
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
Via JavaScript:
$(":file").filestyle();
Via data attributes:
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false">
Options
input
- Enables or disables the input text. Type: Boolean, Default: true
Via JavaScript:
$(":file").filestyle({input: false});
Via data attributes:
<input type="file" class="filestyle" data-input="false">
Example:
icon
- Enables or disables the button icon. Type: Boolean, Default: true
Via JavaScript:
$(":file").filestyle({icon: false});
Via data attributes:
<input type="file" class="filestyle" data-icon="false">
Example:
buttonText
- Changes the button text. Type: String, Default: "Choose file"
Via JavaScript:
$(":file").filestyle({buttonText: "Find file"});
Via data attributes:
<input type="file" class="filestyle" data-buttonText="Find file">
Example:
classButton
- Change classes bootstrap button. Type: String, Default: "btn"
Via JavaScript:
$(":file").filestyle({classButton: "btn btn-primary"});
Via data attributes:
<input type="file" class="filestyle" data-classButton="btn btn-primary">
Example:
classInput
- Change classes bootstrap input text. Type: String, Default: "input-large"
Via JavaScript:
$(":file").filestyle({classInput: "input-small"});
Via data attributes:
<input type="file" class="filestyle" data-classInput="input-small">
Example:
classIcon
- Change classes bootstrap icons. Type: String, Default: "icon-folder-open"
Via JavaScript:
$(":file").filestyle({classIcon: "icon-plus"});
Via data attributes:
<input type="file" class="filestyle" data-classIcon="icon-plus">
Example:
disabled
- Disabled button. Type: Bool, Default: false
Via JavaScript:
$(":file").filestyle({disabled: true});
Via data attributes:
<input type="file" class="filestyle" data-disabled="true">
Example:
buttonBefore
- Button before. Type: Bool, Default: false
Via JavaScript:
$(":file").filestyle({buttonBefore: true});
Via data attributes:
<input type="file" class="filestyle" data-buttonBefore="true">
Example:
Methods
clear
- Clear selected files.
$(":file").filestyle('clear');
destroy
- Destroy a filestyle completely.
$(":file").filestyle('destroy');
disabled
- Disabled a filestyle.
// get $(":file").filestyle('disabled'); // set $(":file").filestyle('disabled', true);
input
- Set or get the value of the input option.
// get $(":file").filestyle('input'); // set $(":file").filestyle('input', false);
icon
- Set or get the value of the icon option.
// get $(":file").filestyle('icon'); // set $(":file").filestyle('icon', false);
buttonText
- Set or get the text of the button.
// get $(":file").filestyle('buttonText'); // set $(":file").filestyle('buttonText', 'Loading...');
classButton
- Set or get the class of the button.
// get $(":file").filestyle('classButton'); // set $(":file").filestyle('classButton', 'btn btn-danger'};
classIcon
- Set or get the class of the icon.
// get $(":file").filestyle('classIcon'); // set $(":file").filestyle('classIcon', 'icon-plus');
classInput
- Set or get the class of the input text.
// get $(":file").filestyle('classInput'); // set $(":file").filestyle('classInput', 'input-small');
buttonBefore
- Set or get button position.
// get $(":file").filestyle('buttonBefore'); // set $(":file").filestyle('buttonBefore', 'true');