Beautify & Customize Bootstrap Input Field With The Filefield Plugin
File Size: | 3.79 KB |
---|---|
Views Total: | 475 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.