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.

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.

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.

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


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. fileinput_locale_ru.js for Russian). These must be loaded after the fileinput.js.

  • Set the language property in the plugin as shown below.

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


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


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

You need to read and setup the ajax server methods to correctly parse and return the right response via AJAX.

Click for Demo

Click for Demo

Click for Demo

Click for Demo

Click for Demo

Click for Demo

Click for Demo

Click for Demo

Click for Demo

Note

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