An enhanced HTML 5 file input for Bootstrap 3.x and 4.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap 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.
NOTE: An alternative new Krajee Explorer Theme (preview shown below) for
bootstrap-fileinputhas been released and available since v4.3.7. For more theming options and suggestions refer the theming demos.
- The latest version of the plugin is v4.4.6. 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 using
bootstrap-sassdependency. The master branch can be used for installation using plain
You can use the
bower package manager to install. Run:
bower install bootstrap-fileinput
You can use the
composer package manager to install. Either run:
$ php composer.phar require kartik-v/bootstrap-fileinput "@dev"
to your composer.json file
Step 1: Load the following assets in your header.
<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions --><!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below --><!-- link href="" media="all" rel="stylesheet" type="text/css" /--><!-- piexif.min.js is only needed for restoring exif data in resized images and when youwish to resize images before upload. This must be loaded before fileinput.min.js --><!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.This must be loaded before fileinput.min.js --><!-- purify.min.js is only needed if you wish to purify HTML content in your preview forHTML files. This must be loaded before fileinput.min.js --><!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js3.3.x versions without popper.min.js. --><!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modaldialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. --><!-- the main fileinput plugin file --><!-- optionally if you need a theme like font awesome theme you can include it as mentioned below --><!-- optionally if you need translation for your language then include locale file as mentioned below -->
If you noticed, you need to load the
bootstrap.min.css in addition to the
fileinput.min.js. The theme file
themes/fa/theme.js can be optionally included for the font awesome icons styling. The locale file
<lang>.js can 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.
purify.min.jsfile is the source for the DomPurify plugin by cure53. It is required to be loaded before
fileinput.min.jsif you wish to purify your HTML for HTML content 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,
// initialize with defaults;// with plugin options;
#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.
bootstrap-fileinput is released under the BSD 3-Clause License. See the bundled
LICENSE.md for details.