Options


dragdrop Enables or disables drag and drop files

Type: Boolean, Default: true

// Via JavaScript:
$(":file").filestyle({dragdrop: false});

// Via data attributes:
<input type="file" class="filestyle" data-dragdrop="false">

Example:


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:


htmlIcon Include external icons

Type: Boolean, Default: true

// Via JavaScript:
$(":file").filestyle({htmlIcon: '<span class="oi oi-random"></span>'});
Data atributtes does not work!

Example:


text Changes the button text

Type: String, Default: "Choose file"

// Via JavaScript:
$(":file").filestyle({text: "Find file"});

// Via data attributes:
<input type="file" class="filestyle" data-text="Find file">

Example:


btnClass Change classes bootstrap button

Type: String, Default: "btn-default"

// Via JavaScript:
$(":file").filestyle({btnClass: "btn-primary"});

// Via data attributes:
<input type="file" class="filestyle" data-btnClass="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: "lg"});

// Via data attributes:
<input type="file" class="filestyle" data-size="lg">

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: false

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

// Via data attributes:
<input type="file" class="filestyle" data-badge="true">

Example:


badgeName Choose class badge

Type: Boolean, Default: badge-light

// Via JavaScript:
$(":file").filestyle({badgeName: "badge-danger"});

// Via data attributes:
<input type="file" class="filestyle" data-badgeName="badge-danger">

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: