Bootstrap FileStyle

Customization of input html file for Bootstrap Twitter

Version 1.2.3

Back to current documentation

Tweet

Suport IE 8+

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.

Twitter Bootstrap 3 and jQuery.

Include:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Via JavaScript:

$(":file").filestyle();

Via data attributes:

<input type="file" class="filestyle">

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:

buttonName

- Change classes bootstrap button. Type: String, Default: "btn-default"

Via JavaScript:

$(":file").filestyle({buttonName: "btn-primary"});

Via data attributes:

<input type="file" class="filestyle" data-buttonName="btn-primary">

Example:

size

- Change size bootstrap of the button and input. Type: String, Default: "nr"

Accepted values: lg, nr, sm

Via JavaScript:

$(":file").filestyle({size: "sm"});

Via data attributes:

<input type="file" class="filestyle" data-size="sm">

Example:

iconName

- Change classes bootstrap icons. Type: String, Default: "glyphicon-folder-open"

Via JavaScript:

$(":file").filestyle({iconName: "glyphicon glyphicon-inbox"});

Via data attributes:

<input type="file" class="filestyle" data-iconName="glyphicon glyphicon-inbox">

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:

badge

- Enables or disables the badge counter. Type: Boolean, Default: true

Via JavaScript:

$(":file").filestyle({badge: true});

Via data attributes:

<input type="file" class="filestyle" data-badge="true">

Example:

placeholder

- Setting placeholder attribute. Type: String, Default:""

Via JavaScript:

$(":file").filestyle({placeholder: "No file"});

Via data attributes:

<input type="file" class="filestyle" data-placeholder="No file">

Example:

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...');

buttonName

- Set or get the class of the button.

// get
$(":file").filestyle('buttonName');
// set
$(":file").filestyle('buttonName', 'btn-danger'};

iconName

- Set or get the class of the icon.

// get
$(":file").filestyle('iconName');
// set
$(":file").filestyle('iconName', 'glyphicon glyphicon-home');

size

- Set or get the class of the input text.

// get
$(":file").filestyle('size');
// set
$(":file").filestyle('size', 'lg');

buttonBefore

- Set or get button position.

// get
$(":file").filestyle('buttonBefore');
// set
$(":file").filestyle('buttonBefore', 'true');

placeholder

- Set or get placeholder text.

// get
$(":file").filestyle('placeholder');
// set
$(":file").filestyle('placeholder', 'My file text');