|Thankful to Krajee!||to get more out of us.|
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.
NEW: Bootstrap 4.x Support now available with release v4.4.4. Version 4.4.4 also includes various preview and styling enhancements including support for smaller screen devices.
Post release v4.0.0, the plugin supports AJAX based uploads using HTML 5 FormData and XHR2 protocol, which is supported in most modern browsers. It also has inbuilt support for AJAX based file deletion from the server. This thereby allows powerful features to append, add, remove files on the fly. The plugin also has added DRAG & DROP support for ajax uploads. In the event, the browser does not support FormData or XHR2, the plugin degrades it to a normal form submission.
This plugin was initially inspired by this blog article and Jasny's File Input plugin. But the plugin has now matured with various additional features and enhancements to be a complete (yet simple) file management tool and solution for web developers.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
webkitdirectory. This feature is supported only by a few modern browsers like Chrome and IE Edge. To use this feature, one must use the file picker button (i.e. the Browse button) to select folder(s). Note: This feature is not available via drag and drop.
defaultPreviewContent. Next, you can show a quick avatar upload widget by setting
main1layout is thus disabled and
main2layout is used. The close button for preview can be hidden by setting
false. You can then tweak other labels and CSS class properties. You can also add your own custom buttons to the
layoutTemplates.main2template for managing the picture. A custom error container identifier can be set to display your file validation errors.
The fileinput plugin supports rendering of multiple language widgets on the same page. To do this, follow these simple steps:
Load all the respective locale JS files for the locale languages you need (e.g.
js/locales/ru.js for Russian). These must be loaded after the
language property in the plugin to the language you need (e.g.
With release v4.3.2, the fileinput plugin supports advanced theming and ability to have separate themes for multiple widgets on the same page. To do this, follow these simple steps:
Load respective theme JS file(s) that you need (e.g.
themes/fa/fa.js for Font Awesome theme). The theme file(s) must be loaded after the
theme property in the plugin to the theme you need and which you have setup in your theme configuration JS file above (e.g.
The plugin will automatically read the theme configuration for the theme name from
$fileinputThemes['<theme-name>'] from the JS file (e.g. via
The plugin will automatically also prepend the CSS selector
theme-<theme-name> to the file input container, so that you can override your styles. The CSS for such themes can be submitted by community in
themes/THEME_NAME folder of the repo.
You can additionally load any theme specific CSS files if needed.
theme.css) are included in the
themes/explorerfolder of the plugin repo. You need to load these theme files after
fileinput.css. The theme name to use in your plugin configuration is
With release v4.3.2, the fileinput plugin includes advanced preview layout management, easily set initial preview with just the data instead of complete markup, sorting and rearranging initial preview, and zooming content in a slideshow format (with borderless/full-screen support).
This is applicable only for image files being uploaded and if
This feature is only supported for ajax based file uploads.
The browser must support HTML 5 canvas features and methods.
You must load the Piexifjs plugin by hMatoba before the
fileinput.js script. This plugin is provided in the
js/plugins folder of the repo for easy access.
You must set the
resizeImage property along with either of
truewith a proper maxFileCount setting. For restricting to single (ONE) file uploads, in addition to setting maxFileCount to
1, do NOT SET the
multipleattribute of the file input (to prevent multiple selections).
true. This can be validated for both ajax uploads (with uploadUrl) and non-ajax uploads (without