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.

Automatically convert a file input to a bootstrap file input widget by setting its class as file

Hide file preview thumbnails

Use file input attributes (e.g. multiple upload) for setting input behavior and data attributes to control plugin options. For example, hide/show display of upload button and caption.

Set the file input widget to be readonly or disabled

Initialize file input widget via javascript. Hide the caption and display widget with only buttons. You can add the file-loading class to show a spinning indicator, while the plugin loads.

Change size of whole widget (e.g. bootstrap input group styling) and set max files count allowed to 10.
// Automatically convert a file input to a bootstrap file input widget
// by setting its class as 'file'
<input id="input-1" type="file" class="file">

// Hide file preview thumbnails
<input id="input-1a" type="file" class="file" data-show-preview="false">

// Use file input attributes (e.g. multiple upload) for setting input behavior and data attributes to 
// control plugin options. For example, hide/show display of upload button and caption.
<input id="input-2" type="file" class="file" multiple="true" data-show-upload="false" data-show-caption="true">

// Set the file input widget to be readonly or disabled
 <input id="input-3a" type="file" class="file" readonly="true">
 <input id="input-3b" type="file" class="file" disabled="true">

// Initialize file input widget via javascript. Hide the caption and display widget with only buttons.
<input id="input-4" type="file" multiple="true">
/* Javascript call to initialize plugin with your desired options */
$("#input-4").fileinput({showCaption: false}); 

// Change size of whole widget (e.g. bootstrap input group styling)  and set max files count 
// allowed to 10.
<input id="input-5" type="file" multiple="true">
/* Javascript call to initialize plugin with your desired options */
$("#input-5").fileinput({showUpload: false, maxFileCount: 10, mainClass: "input-group-lg"});

Set maximum file upload size to 100 KB. Display preview on load with preset files/images and captions with overwriteInitial set to false. So the initial preview is always displayed when additional files are overwritten (useful for multiple upload) scenario.

Display preview on load with preset files/images and captions with overwriteInitial set to true.

Display the widget as a single block button

Show only image files for selection & preview. Control button labels, styles, and icons for the browse, upload, and remove buttons.

Preview section control. Change preview background and allow text files ONLY for selection as well as preview.

Advanced customization using templates. For example, change position of buttons from right to left.


Using plugin methods to alter input at runtime. For example, click the Modify button to disable the plugin and change plugin options.

Allow only image and video file types to be uploaded. You can configure the condition for validating the file types using fileTypeSettings.

Allow only specific file extensions.

Disable preview and customize your own error container and messages.
// Set maximum file upload size to 100 KB. Display preview on load with preset files/images and captions
// with `overwriteInitial` set to false. So the initial preview is always displayed when additional files 
// are overwritten (useful for multiple upload) scenario.
<input id="input-24" type="file" multiple="true">
$("#input-24").fileinput({
    initialPreview: [
        "<img src='/images/moon.jpg' class='file-preview-image' alt='The Moon' title='The Moon'>",
        "<img src='/images/earth.jpg' class='file-preview-image' alt='The Earth' title='The Earth'>",
    ],
    overwriteInitial: false,
    maxFileSize: 100,
    initialCaption: "The Moon and the Earth"
});

// Display preview on load with preset files/images and captions
// with `overwriteInitial` set to true.
<input id="input-25" type="file" multiple="true">
$("#input-25").fileinput({
    initialPreview: [
        "<img src='/images/moon.jpg' class='file-preview-image' alt='The Moon' title='The Moon'>",
        "<img src='/images/earth.jpg' class='file-preview-image' alt='The Earth' title='The Earth'>",
    ],
    overwriteInitial: true,
    initialCaption: "The Moon and the Earth"
});

// Display the widget as a single block button
<input id="input-20" type="file">
/* Initialize your widget via javascript as follows */
$("#input-20").fileinput({
	browseClass: "btn btn-primary btn-block",
	showCaption: false,
	showRemove: false,
	showUpload: false
});

// Show only image files for selection & preview. Control button labels, styles, 
// and icons for the browse, upload, and remove buttons.
<input id="input-21" type="file" accept="image/*" >
<script>
/* Initialize your widget via javascript as follows */
$("#input-21").fileinput({
	previewFileType: "image",
	browseClass: "btn btn-success",
	browseLabel: "Pick Image",
	browseIcon: '<i class="glyphicon glyphicon-picture"></i>',
	removeClass: "btn btn-danger",
	removeLabel: "Delete",
	removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
	uploadClass: "btn btn-info",
	uploadLabel: "Upload",
	uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
</script>

// Preview section control. Change preview background and allow text files ONLY 
// for selection as well as preview.
<input id="input-22" type="file" class="file-loading" accept="text/plain" multiple>
<script>
$("#input-22").fileinput({
    previewFileType: "text",
    allowedFileExtensions: ["txt", "md", "ini", "text"],
    previewClass: "bg-warning"
});
</script>
 
// Advanced customization using templates. For example, change position of buttons 
// from right to left.
<input id="input-23" type="file" multiple="true">
<script>
$("#input-23").fileinput({
	showUpload: false,
	layoutTemplates: {
        main1: "{preview}\n" +
        "<div class=\'input-group {class}\'>\n" +
        "   <div class=\'input-group-btn\'>\n" +
        "       {browse}\n" +
        "       {upload}\n" +
        "       {remove}\n" +
        "   </div>\n" +
        "   {caption}\n" +
        "</div>"
    }
});
</script>

// Using plugin methods to alter input at runtime. For example, click the 
// Modify button to disable the plugin and change plugin options.
<input id="input-40" type="file" class="file" multiple>
<script>
$(".btn-modify").on("click", function() {
    $btn = $(this);
    if ($btn.text() == "Modify") {
        $("#input-40").fileinput("disable");
        $btn.html("Revert");
        alert("Hurray! I have disabled the input and hidden the upload button.");
    }
    else {
        $("#input-40").fileinput("enable");
        $btn.html("Modify");
        alert("Hurray! I have reverted back the input to enabled with the upload button.");
    }
});
</script>

// Allow only image and video file types to be uploaded. You can configure 
// the condition for validating the file types using `fileTypeSettings`.
<input id="input-41" type="file" multiple>
<script>
$("#input-41").fileinput({
    maxFileCount: 10,
    allowedFileTypes: ["image", "video"]
});
</script>

// Allow only specific file extensions to be uploaded. 
<input id="input-42" type="file" multiple>
<script>
$("#input-42").fileinput({
    maxFileCount: 10,
    allowedFileExtensions: ["jpg", "gif", "png", "txt"]
});
</script>

// Disable preview and customize your own error container and messages.
<input id="input-43" type="file" multiple>
<div id="errorBlock43" class="help-block"></div>
<script>
$("#input-43").fileinput({
    showPreview: false,
    allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
    elErrorContainer: "#errorBlock43"
    // you can configure `msgErrorClass` and `msgInvalidFileExtension` as well
});
</script>

The fileinput plugin supports multiple language widgets to be rendered 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.

FileInput in Russian
FileInput in French
<!-- LOAD THESE FILES IN YOUR PAGE AFTER fileinput.js SCRIPT LOAD -->
<script src="/path/to/js/fileinput_locale_ru.js"></script>
<script src="/path/to/js/fileinput_locale_fr.js"></script>

<!-- RUSSIAN FILE INPUT -->
<input id="input-ru" type="file" multiple class="file-loading">
<script>
$("#input-ru").fileinput({
    language: "ru",
    uploadUrl: "http://localhost/site/file-upload-batch",
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>

<!-- FRENCH FILE INPUT -->
<input id="input-fr" type="file" multiple class="file-loading">
<script>
$("#input-fr").fileinput({
    language: "fr",
    uploadUrl: "http://localhost/site/file-upload-batch",
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>

Validate image dimensions when uploading image files. Applicable only for image files and if showPreview is true.

Set Minimum Image Dimensions
Set Maximum Dimensions
<!-- MINIMUM IMAGE DIMENSIONS -->
<input id="input-dim-1" type="file" multiple class="file-loading" accept="image/*">
<script>
$("#input-dim-1").fileinput({
    uploadUrl: "http://localhost/site/file-upload-batch",
    allowedFileExtensions: ["jpg", "png", "gif"],
    minImageWidth: 50,
    minImageHeight: 50
});
</script>

<!-- MAXIMUM IMAGE DIMENSIONS -->
<input id="input-dim-2" type="file" multiple class="file-loading" accept="image/*">
<script>
$("#input-dim-2").fileinput({
    uploadUrl: "http://localhost/site/file-upload-batch",
    allowedFileExtensions: ["jpg", "png", "gif"],
    maxImageWidth: 250,
    maxImageHeight: 250
});
</script>

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

Note

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