jQuery Fileselect Plugin Demos


Bootstrap fileselect will replace the browser-specific styled file input fields...

...to bootstrap-styled form controls.

<input id="demo1" type="file" name="demo" />


Same behaviour as mentioned in the basic example, but you can choose multiple files now.

<input id="demo2" type="file" name="demo" multiple />


You can set 3 types of validation rules:

  • Limit the number of uploadable files
  • Restrict the allowed file extensions
  • Restrict the allowed file size
<input id="demo3" type="file" name="demo" multiple />
        allowedNumberOfFiles: 3, // default: false, no limitation
        allowedFileExtensions: ['zip'] // default: false, all extensions allowed
        allowedFileSize: 2097152 // 2MB, default: false, no limitation


You can define the css class(es) of the browse button.

<input id="demo4" type="file" name="demo" multiple />
        browseBtnClass: 'btn btn-danger', // default: btn btn-primary


The plugin will use the browser language, but you can also define a language. If the defined language isn't supported, then the plugin will fallback to the english translations.

<input id="demo5" type="file" name="demo" multiple />
        language: 'de' // default: false, browser language

Validation callback

Define your custom validation callback if you don't want to get an alert message..

<input id="demo6" type="file" name="demo" />
        allowedFileExtensions: ['xyz'],
        validationCallback: function (m, type, instance) {
                    .after('<span class="small text-danger">' + m + '</span>');


Bootstrap Fileselect has more than 5 events for customized event listeners:

  • Before (bs.fs.validate) and after (bs.fs.validated) each validation
  • Before (bs.fs.file-size-validate) and after (bs.fs.file-size-validated) file size validation
  • Before (bs.fs.number-of-files-validate) and after (bs.fs.number-of-files-validated) number of files validation
  • Before (bs.fs.file-extensions-validate) and after (bs.fs.file-extensions-validated) file extensions validation
  • Before (bs.fs.change) and after (bs.fs.changed) each change
<input id="demo7" type="file" name="demo" />
            .on('bs.fs.changed', function (e, instance) {
                alert('New file selected: ' + instance.$fileInput.val());