An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with file preview, multiple selection, ajax uploads, and more features.
npm install bootstrap-fileinput
$.fn.fileinputBsVersion setting for advanced use cases to avoid Bootstrap version detection issues.
bootstrap-fileinput has been released and available since v4.3.7. For more theming options and suggestions refer the theming demos.
bootstrap-sass dependency.
bootstrap dependency.
bower package manager run:
npm package manager run:
composer package manager run:
html
`
With v5.2.1, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if you have loaded the bootstrap.min.js before fileinput.min.js). In case of any issues - you can explicitly set the bootstrap version by setting the following variable before the plugin initialization script.
`js
// set this before initializing the fileinput plugin
$.fn.fileinputBsVersion = '3.4.1'; // for example if using bootstrap css 3.4.1 version
`
If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the fileinput.min.css and fileinput.min.js. The theme file themes/fa/theme.js can be optionally included for the font awesome icons styling. The locale file can be optionally included for translating for your language if needed.
Optional Dependent Plugins
- The piexif.min.js file is the source for the Piexifjs plugin by hMatoba. It is required to be loaded before fileinput.min.js if you wish to use the image resize feature of the bootstrap-fileinput plugin.
- The sortable.min.js file is the source for the Sortable plugin by rubaxa. It is required to be loaded before fileinput.min.js if you wish to sort the thumbnails in the initial preview.
For ease of access, the sources for the above plugins are included in the js/plugins folder of this project repository.
Step 2: Initialize the plugin on your page. For example,
`html
// HTML markup
`
The #input-id is the identifier for the input (e.g. type = file) on your page, which is hidden automatically by the plugin.
Alternatively, you can directly call the plugin options by setting data attributes to your input field. To auto initialize the plugin with just HTML markup - add the CSS class file to your file input markup element.
`html
`
NOTE: When initializing the plugin via javascript (as mentioned earlier), do not add the CSS class file to the input markup (else you would get an erronaeous / inconsistent output).
Contributors
$3
This project exists thanks to all the people who contribute. [Contribute].
$3
Become a financial contributor and help us sustain our community. [Contribute]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
License
bootstrap-fileinput is released under the BSD-3-Clause License. See the bundled LICENSE.md` for details.