An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with file preview for various files, offers multiple selection, resumable chunk uploads, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap 5.x, 4.x, and 3.x CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
NEW: Bootstrap 5.x support is added from v5.2.0 (major release after v5.1.5) of the plugin. With v5.2.0, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if the bootstrap library JS file is loaded). Alternatively, check the$.fn.fileinputBsVersionsetting for advanced use cases to avoid Bootstrap version detection issues.
NOTE: Version 5.x is a significant rewrite. With version 5.x, the plugin code has been revamped with enhanced file management, resumable chunk uploads support, and other new features. You can go through the various closed enhancements and features and documented for Release 5.x milestone.
NOTE: An alternative new Krajee Explorer Theme (preview shown below) forbootstrap-fileinputhas been released and available since v4.3.7. For more theming options and suggestions refer the theming demos.
NOTE: - Bootstrap 5.x is supported in addition to Bootstrap 3.x and 4.x since release v5.2.0. Refer the CHANGE LOG for details. - Bootstrap 4.x is supported in addition to Bootstrap 3.x since release v4.4.4. Refer the CHANGE LOG for details. - You can use the sass branch for installation usingbootstrap-sassdependency. The master branch can be used for installation using plainbootstrapdependency.
To install using the
bowerpackage manager run:
bower install bootstrap-fileinput
To install using the
npmpackage manager run:
npm install bootstrap-fileinput
To install using the
composerpackage manager run:
$ php composer.phar require kartik-v/bootstrap-fileinput "@dev"
to your composer.json file
Step 1: Load the following assets on your page in the order mentioned.
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.
// 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
bootstrap.min.cssin addition to the
fileinput.min.js. The theme file
themes/fa/theme.jscan be optionally included for the font awesome icons styling. The locale file
.jscan be optionally included for translating for your language if needed.
Optional Dependent Plugins
piexif.min.jsfile is the source for the Piexifjs plugin by hMatoba. It is required to be loaded before
fileinput.min.jsif you wish to use the image resize feature of the bootstrap-fileinput plugin.
sortable.min.jsfile is the source for the Sortable plugin by rubaxa. It is required to be loaded before
fileinput.min.jsif 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/pluginsfolder of this project repository.
Step 2: Initialize the plugin on your page. For example,
// HTML markup
#input-idis 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
fileto your file input markup element.
fileto the input markup (else you would get an erronaeous / inconsistent output).
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
bootstrap-fileinput is released under the BSD-3-Clause License. See the bundled