An enhanced HTML 5 file input for Bootstrap 3.x with file preview, multiple selection, ajax uploads, and more features.
npm install @backstrap/bootstrap-fileinputbootstrap-fileinput
===================





An enhanced HTML 5 file input for Bootstrap 3.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.
!Krajee Default Theme
> NOTE: An alternative new Krajee Explorer Theme (preview shown below) for bootstrap-fileinput has been released and available since v4.3.7. For more theming options and suggestions refer the theming demos.
!Krajee Explorer Theme
bootstrap-sass dependency.
bootstrap dependency.
bower package manager to install. Run:
composer package manager to install. Either run:
html
`
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 canvas-to-blob.min.js file is the source for the JavaScript-Canvas-to-Blob plugin by blueimp. 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.
- The purify.min.js file is the source for the DomPurify plugin by cure53. It is required to be loaded before fileinput.min.js if 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,
`js
// initialize with defaults
$("#input-id").fileinput();
// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
`
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.
`html
`
License
bootstrap-fileinput is released under the BSD 3-Clause License. See the bundled LICENSE.md` for details.