Bootstrap File Input Demo - © Kartik

Bootstrap File Input Demo

Star Fork Watch Follow

Thankful to Krajee! BUY A COFFEEor to get more out of us.

An enhanced HTML 5 file input for Bootstrap 5.x or Bootstrap 4.x or 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: Release v5.0.0 is a major rewrite that incorporates various new enhancements and features like resumable chunk uploads and more. A summary of the features available with this release are documented in the Release 5.0.0 milestone.

Bootstrap 5.x Support is available with release v5.2.0. From release v5.2.0, the bootstrap version is also auto detected by the plugin based on the bootstrap JS library loaded. This can also be overridden via the new global property $.fn.fileinputBsVersion. Note that as of May 2021, an issue exists with Bootstrap 5.x on Modal dialog initialization which is recorded in this issue with a workaround.

Bootstrap 4.x Support is also available with release v4.4.4. The release 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.

Note

You can refer this webtip for an example of processing ajax based uploads using PHP.

Tip

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)

Basic usage examples of the bootstrap-fileinput plugin.

Advanced usage examples of the bootstrap-fileinput plugin.

Configuring advanced resumable / chunk ajax based uploads for the bootstrap-fileinput plugin. Refer the resumable uploads section for overview on setting up resumable / chunk uploads.

Upload files recursively within folders using 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.

An example to show how you can use the plugin to manage an user profile picture upload (or an avatar). This is achieved with a simple form based upload scenario. The example shows how you can set a default user profile picture (or a previously saved picture) using defaultPreviewContent. Next, you can show a quick avatar upload widget by setting showCaption to false. The main1 layout is thus disabled and main2 layout is used. The close button for preview can be hidden by setting showClose to false. You can then tweak other labels and CSS class properties. You can also add your own custom buttons to the layoutTemplates.main2 template 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 fileinput.js.
Set the language property in the plugin to the language you need (e.g. 'ru').

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/theme.js for Font Awesome theme). The theme file(s) must be loaded after the fileinput.js.
Set 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. 'fa').
The plugin will automatically read the theme configuration for the theme name from $.fn.fileinputThemes['<theme-name>'] from the JS file (e.g. via $.fn.fileinputThemes['<theme-name>']).
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.

Note

Currently the plugin includes the Font Awesome and Glyphicons themes. More advanced themes may be added in future or can be contributed here by the community.

Krajee Explorer Theme is a new theme available from release v4.3.7 of the plugin. The theme provides an interesting alternative to displaying the file thumbnails for preview as a file explorer format. The theme files (theme.js and theme.css) are included in the themes/explorer folder of the plugin repo. You need to load these theme files after fileinput.js and fileinput.css. The theme name to use in your plugin configuration is explorer.

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).

You may want to show custom icons based on file type for each preview thumbnail instead of embedding file content OR the default previewFileIcon. The plugin provides you with the ability to set different user friendly file type icons to be shown within the file thumbnail instead of the default previewFileIcon. This method also has an added advantage of an improved performance, since in this method the plugin does not incur the overhead of FileAPI reading and displaying the file content for preview. It is also useful, when you want to display icons for each file type instead of displaying content within the files. You must set the previewFileIconSettings to set the file type icon for each file extension. Note: For this to be effective, you must configure allowedPreviewTypes AND / OR allowedPreviewMimeTypes. These will enable you to allow the parsing of embedded content only for these selected file types and display file type icons for the rest. You can also configure previewFileExtSettings for advanced scenarios to auto-derive extensions via a callback.

Demonstration for validating image dimensions when you are uploading image files. This is applicable only for image files and if showPreview is true.

Demonstration for managing and manipulating images before upload. Currently auto-orientation of JPEG images (CSS styles) and resizing of images (width or height) is supported as part of image management before upload. The following are the pre-requisites for image management:

This is applicable only for image files being uploaded and if showPreview is true.
The resize will only be possible if the image is displayed in the preview window. Note that based on maxFilePreviewSize setting, the plugin will not display the file in preview, if the file size exceeds maxFilePreviewSize.
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 maxImageWidth or maxImageHeight.

A demonstration for auto replacing files in the preview when it exceeds the maxFileCount setting. For this to work, you must set the autoReplace property to true with a proper maxFileCount setting. For restricting to single (ONE) file uploads, in addition to setting maxFileCount to 1, do NOT SET the multiple attribute of the file input (to prevent multiple selections).

Advanced file count validation for minFileCount and maxFileCount. You can choose to include initial preview file count in these checks by setting validateInitialCount property to true. This can be validated for both ajax uploads (with uploadUrl) and non-ajax uploads (without uploadUrl).

Demonstration on usage of various plugin methods to manipulate the fileinput plugin. This example also shows usage of a few plugin events before and after a REFRESH method. TIP: To test destruction and recreation - try using the Browse button to select a file. Then click DESTROY. You will see the destroyed plugin and a native fileinput which will still have the file(s) selected. Clicking RECREATE will revive back the plugin along with the file(s) selected.

Advanced upload ability with various configurable functionality are possible through ajax uploads. You need to read and setup the ajax server methods to correctly parse and return the right response via AJAX.

Note

You can refer this webtip for an example of processing ajax based uploads using PHP.

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

visitors to Krajee Jquery Plugins since 22-May-2017