Bootstrap Fileselect The jQuery replacement for file input fields

Introduction

Bootstrap Fileselect is a jQuery plugin, which creates bootstrap-styled form controls for file uploads, also know as file selects or file input fields, and with some kind of validation and translation support.

Examples

Basic

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

...to bootstrap-styled form control.

<input id="demo1" type="file" />
<script>
    $('#demo1').fileselect();
</script>

Multiple

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

<input id="demo2" type="file" multiple />
<script>
    $('#demo2').fileselect();
</script>

Validation

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" />
<script>
    $('#demo3').fileselect({
        allowedNumberOfFiles: 3, // default: false, no limitation
        allowedFileExtensions: ['zip'] // default: false, all extensions allowed
        allowedFileSize: 2097152 // 2MB, default: false, no limitation
    });
</script>

Restyling

For custom styles, the restyling to bootstrap-styled form control can also be disabled.

<input id="demo4" type="file" style="border: 2px solid #0000ff; padding: 5px; width: 100%;" />
<script>
    $('#demo4').fileselect({
        restyling: false, // default: true
    });
</script>

Translations

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 translation.

<input id="demo5" type="file" />
<script>
    $('#demo5').fileselect({
        language: 'de', // default: false, browser language
        translations: {
            'de': {
                'chooseFile': 'Datei auswählen...',
                'chooseFiles': 'Dateien auswählen...',
                'browse': 'Durchsuchen',
                'rules': {
                    'numberOfFiles': 'Die Anzahl der hochladbaren Dateien ist limitiert auf [num] Datei(en)',
                    'fileExtensions': 'Die Dateien sind eingeschränkt auf folgende Dateierweiterungen: [ext]',
                    'fileSize': 'Die Grösse ist eingeschränkt auf [size] pro Datei',
                }
            }
        },
    });
</script>

Validation callback

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

<input id="demo6" type="file" />
<span class="small text-danger"></span>
<script>
    $('#demo6').fileselect({
        allowedFileExtensions: ['xyz'],
        validationCallback: function (message, type, instance) {
            instance.$inputGroup.next('span').text(message);
        }
    });
</script>

Events

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" />
<script>
    $('#demo7')
            .fileselect()
            .on('bs.fs.changed', function (e, instance) {
                alert('New file selected: ' + instance.$fileInput.val());
            });
</script>