Customizable File Input Plugin For Bootstrap 4 - Fileselect

Customizable File Input Plugin For Bootstrap 4 - Fileselect
File Size: 24.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Fileselect is a jQuery plugin for Bootstrap 4 which helps you create a pretty file select input to replace the regular Bootstrap 4 file input field.

More features:

  • Works for multi files and single files.
  • Custom button styling & position.
  • Limits the number of uploadable files.
  • Restricts the allowed file extensions.
  • Restricts the allowed file size.
  • Multiple languages.
  • Validation callbacks.

How to use it:

1. To use this plugin, first you need to load the jQuery library and Bootstrap 4 framework in the html document.

<link href="/path/to/bootstrap.min.css" type="text/css">
<script src="/path/to/jquery.min.js"></script>

2. Load the jQuery Fileselect plugin's script after jQuery.

<script src="bootstrap-fileselect.js"></script>

3. Initialize the plugin on the file input field and you're done.

<input type="file" name="demo" />
$('#demo').fileselect();

4. Define the CSS class(es) of the browse button.

$('#demo').fileselect({
  browseBtnClass: 'btn btn-danger'
});

5. The plugin currently comes with 3 types of validation rules:

$('#demo').fileselect({
  allowedNumberOfFiles: 3,
  allowedFileExtensions: ['zip'],
  allowedFileSize: 2097152
});

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

$('#demo').fileselect({
  language: 'de'
});

7. Validate the selected file(s) and display the validation message using the validation callback as this:

$('#demo').fileselect({
  allowedFileExtensions: ['zip'],
  validationCallback: function (m, type, instance) {
    instance.$inputGroup.after('<span class="small text-danger">' + m + '</span>');
  }
});

8. All default options.

$('#demo').fileselect({
  browseBtnClass: 'btn btn-primary',
  browserBtnPosition: 'right',
  limit: false,
  extensions: false,
  allowedFileSize: false,
  allowedFileExtensions: false,
  allowedNumberOfFiles: false,
  language: 'en',
  validationCallback: function (message, instance) {
      alert(message);
  }
});

9. Events.

$('#demo').fileselect()
.on('bs.fs.validate', function (e, instance) {
    // before validation
});
.on('bs.fs.validated', function (e, instance) {
    // after validation
});
.on('bs.fs.change', function (e, instance) {
    // before each change
});
.on('bs.fs.changed', function (e, instance) {
    // after each change
});
.on('bs.fs.file-size-validate', function (e, instance) {
    // before file size validation
});
.on('bs.fs.file-size-validated', function (e, instance) {
    // after file size validation
});
.on('bs.fs.file-extensions-validate', function (e, instance) {
    // before file extensions validation
});
.on('bs.fs.file-extensions-validated', function (e, instance) {
    // after file extensions validation
});

This awesome jQuery plugin is developed by Neoflow. For more Advanced Usages, please check the demo page or visit the official website.