Fileselect Plugin In Jquery – Bootstrap 4

File Size:22.08 KB
Views Total:336
Last Update:December 24, 2017
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

Fileselect is a jQuery plugin for use bootstrap and gives you a new look in input file browse button,  bootstrap-styled form controls for input file uploads, also know as file selects or input file fields, with some kind of validation support and customization.

How to use it:

Requirements

  • jQuery 3.0.0 or higher
  • Bootstrap 4.0.0 or higher
  1. Install path :
    <link href="/path/to/bootstrap.min.css" type="text/css">
    <script src="/path/to/jquery.min.js"></script>
    <script src="bootstrap-fileselect.js"></script>
  2.  Initialize the plugin on the file input field :
    <input type="file" name="demo" />
  3.  Fileselect plugin  parameter :
    $('#demo').fileselect({
      browseBtnClass: 'btn btn-danger',
    allowedNumberOfFiles: 3,
      allowedFileExtensions: ['zip'],
      allowedFileSize: 2097152,
      language: 'de'
    
    });
  4.  The plugin will use the browser language :
    $('#demo').fileselect({
      language: 'de'
    });
  5. Validate the selected file(s) and display the validation message :
    $('#demo').fileselect({
      allowedFileExtensions: ['zip'],
      validationCallback: function (m, type, instance) {
        instance.$inputGroup.after('<span class="small text-danger">' + m + '</span>');
      }
    });
  6.  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);
      }
    });
  7.  Plugin 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
    });

    Done 🙂