Bootstrap File Input Demo bootstrap-fileinput

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.

This plugin enhances the HTML 5 file input for Bootstrap 3.x into an advanced widget with file preview for various files, multiple selection, and more. This plugin is inspired by this blog article and Jasny's File Input plugin. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It offers support for previewing a wide variety of files i.e. images, text, html, video, audio, flash, and objects.

New features since v2.4.0

Note: There are BC Breaking Changes with release v2.4.0.

With release v2.4.0, the plugin has been revamped to support and configure a wide variety of file formats for preview. This may break some backward compatibility (BC) for older versions that use custom templates.

The following are the major changes with release v2.4.0:

  • Completely templatized and extensible to allow configuration of the file-input the way the developer wants.

  • Plugin has been revamped to build preview intelligence based on various file preview types. The inbuilt file support types are categorized as image, text, html, video, audio, flash, object, and other.

  • allowedPreviewTypes: You can now configure which all file types are allowed to be shown as a preview. This defaults to ['image', 'html', 'text', 'video', 'audio', 'flash', 'object']. Thus all file types are treated as an object to preview by default. For example, to preview only image and video, you can set this to ['image', 'video'].

  • allowedPreviewMimeTypes: In addition to allowedPreviewTypes, you can also control which all mime types can be displayed for preview. This defaults to null, meaning all mime types are supported.

  • Note

    With release 2.5.0 you can now control which file types or extensions are allowed for upload by setting allowedFileTypes and allowedFileExtensions.
  • layoutTemplates: Allows you to configure all layout template settings within one property. The layout objects that can be configured are: main1, main2, preview, caption, and modal.

  • previewTemplates: All preview templates for each preview type have been combined into one property, instead of separate templates for image, text etc. The keys are the formats as set in allowedPreviewTypes and values are the templates used for previewing. There are default prebuilt templates for each preview file type (generic, image, text, html, video, audio, flash, object, and other). The generic template is used only for displaying initialPreview content using direct markup.

  • previewSettings: Allows you to configure width and height for each preview image type. The plugin has default widths and heights predefined for each type i.e image, text, html, video, audio, flash, and object.

  • fileTypeSettings: Allows you to configure and identify each preview file type using a callback. The plugin has default callbacks predefined to identify each type i.e image, text, html, video, audio, flash, and object.

  • Replacing tags within templates has been enhanced. With this release it will automatically check for multiple occurrences of each tag to replace within a template string.

Note

Flash preview will require Shockwave flash to be installed and supported by the client browser. The flash preview currently works successfully with webkit browsers only. Video & Audio formats are however supported by all modern browsers that support the HTML5 video/audio tags. Note that browsers have limited number of video/audio formats supported by the HTML5 video element (e.g. mp4, webm, ogg, mp3, wav). The size of video files are recommended to be small (to be controlled through maxFileSize property) so that it does not affect the preview performance. You can copy a few files from the examples directory of this plugin repo, to test a few examples of flash and video files.

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 display only text files content within the preview window.

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 display only text files 
// content within the preview window.
<input id="input-22" type="file" class="file" accept="text/plain" multiple="true" 
 data-preview-file-type="text" data-preview-class="bg-warning">
 
// 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,
	mainTemplate:
		"{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=true>
<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=true>
<script>
$("#input-41").fileinput({
    maxFilesNum: 10,
    allowedFileTypes: ["image", "video"]
});
</script>

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

// Disable preview and customize your own error container and messages.
<input id="input-43" type="file" multiple=true>
<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>