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.
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>
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>
You can set 3 types of validation rules:
<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>
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>
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>
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>
Bootstrap Fileselect has more than 5 events for customized event listeners:
bs.fs.validate
) and after (bs.fs.validated
) each validation
bs.fs.file-size-validate
) and after (bs.fs.file-size-validated
) file size validation
bs.fs.number-of-files-validate
) and after (bs.fs.number-of-files-validated
) number of files validation
bs.fs.file-extensions-validate
) and after (bs.fs.file-extensions-validated
) file extensions validation
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>