Bootstrap File Input Demo bootstrap-fileinput   Tips

Thankful to Krajee!
to get more out of us.

NOTE: The plugins on this site, strive to use a lot of CSS3 and HTML5 features in addition to JQuery. Hence, one may find either CSS3, HTML5 or a mix of both to achieve a plugin's requirements in many implementations.

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.

With release v4.0.0, the plugin now 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.

Click for Demo


Basic usage examples of the bootstrap-fileinput plugin.

Click for Demo


Advanced usage examples of the bootstrap-fileinput plugin.

Click for Demo


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.

Click for Demo


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.

Click for Demo


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

Click for Demo


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 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 $fileinputThemes[''] from the JS file (e.g. via $fileinputThemes['']).

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

Click for Demo


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

Click for Demo


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.

Click for Demo


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

Click for Demo


Demonstration for managing and manipulating images before upload. Currently resizing of images (width or height) is supported as part of image manipulation before upload. The following are the pre-requisites for resizing to work:
  • This is applicable only for image files being uploaded and if showPreview is true.

  • This feature is only supported for ajax based file uploads.

  • The browser must support HTML 5 canvas features and methods.

  • You must load the JavaScript-Canvas-to-Blob plugin by blueimp 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.

Click for Demo


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

Click for Demo


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

Click for Demo


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.

Click for Demo


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.