Beautify & Customize Bootstrap Input Field With The Filefield Plugin

Filefield is a jQuery plugin for Bootstrap 5 framework, which can be used to beautify and enhance the default file upload input box by using custom upload button styles and icons.

How to use it:

1. Load the Filefield plugin in your document which has jQuery and Bootstrap included.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Optional -->
<script src="/path/to/cdn/bootstrap.bundlemin.js"></script>

<!-- Filefield Plugin -->
<link rel="stylesheet" href="/path/to/css/bootstrap5filefield.css" />
<script src="/path/to/js/bootstrap5filefield.js"></script>

2. Call the plugin on the target file input and specify the button style as follows:

• info
• warning
• success
• dark
• light
• primary (default)

<div class="form-group">
  <label>File Upload</label>
  <input type="file" class="form-control-file">
</div>

$(function(){
  $('.form-control-file').bootstrap4FileField({
    style: 'warning',
  });
});

3. Add a custom icon to the upload button:

$(function(){
  $('.form-control-file').bootstrap4FileField({
    icon: 'icon class here'
  });
});

4. Set the placeholder text of the file input.

$(function(){
  $('.form-control-file').bootstrap4FileField({
    placeholder: 'Upload Your File Here...'
  });
});

5. Customize the text to display in the upload button.

$(function(){
  $('.form-control-file').bootstrap4FileField({
    label: 'Choose File'
  });
});

---

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