Updated plugin functionality

CHANGE.md

@@ -0,0 +1,17 @@
+version 1.0.0
+=============
+
+Initial release. The following features are included in this release:
+
+1. Convert any HTML input to a star rating control. Recommended input is of `type = number`, which will help fallback to a number input for browsers not supporting JQuery or Javascript.
+2. The plugin automatically converts an input with `type = number` to a star rating control if you set its `class = rating`. All options to the input can be passed as HTML5 `data` attributes.
+3. Involves pure CSS3 styling of the stars. Say goodbye to image sprites or playing with image backgrounds. Offers clean scalable vector icons for consistent display across devices.
+4. Specifically uses Bootstrap 3.x styles & glyphs. Can be combined to work better for Bootstrap styled projects (or input group addons).
+5. Ability to clear values and options for the stars. Control where the clear button element can be shown.
+6. Reset star rating to the initial value when the form is reset.
+7. Ability to control and display caption of the selected stars. Each rated star can have its own caption. Control where the caption element can be shown.
+8. Ability to size the rating control including the stars, caption, and clear button. Five prebuilt size templates are available `xl`, `lg`, `md`, `sm`, and `xs`.
+9. Support for RIGHT TO LEFT (RTL) input. Automatically changes star styling for RTL.
+10. Triggers JQuery events for advanced development. Events currently available are `rating.change`, `rating.clear`, and  `rating.reset`.
+11. Disabled and readonly input star rating support.
+12. Size of the entire plugin is less than 9KB (about 6KB for the minified JS and 3KB for the minified CSS).

LICENSE.md

@@ -0,0 +1,28 @@
+Copyright (c) 2013, Kartik Visweswaran  
+Krajee.com  
+All rights reserved.  
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this
+  list of conditions and the following disclaimer in the documentation and/or
+  other materials provided with the distribution.
+
+* Neither the names of Kartik Visweswaran or Krajee nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -1,4 +1,4 @@
-bootstrap-file-input
+bootstrap-fileinput
 ====================
 
 An enhanced HTML 5 file input for Bootstrap 3.x with file preview, multiple selection, and more features.

bower.json

@@ -0,0 +1,32 @@
+{
+  "name": "bootstrap-fileinput",
+  "version": "1.0.0",
+  "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
+  "authors": [
+    "Kartik Visweswaran <[email protected]>"
+  ],
+  "description": "An enhanced HTML 5 file input for Bootstrap 3.x with file preview, multiple selection, and more features.",
+  "main": [
+    "./css/fileinput.min.css",
+    "./js/fileinput.min.js"
+  ],
+  "keywords": [
+    "bootstrap",
+    "star",
+    "rating"
+  ],
+  "dependencies": {
+    "jquery": ">= 1.9.0",
+    "bootstrap": ">= 3.0.0"
+  },
+  "license": "BSD-3",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "composer.json",
+    "examples",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

composer.json

@@ -0,0 +1,17 @@
+{
+    "name": "kartik-v/bootstrap-fileinput",
+    "description": "An enhanced HTML 5 file input for Bootstrap 3.x with file preview, multiple selection, and more features.",
+    "keywords": ["bootstrap", "jquery", "file", "input"],
+    "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
+    "license": "BSD 3-Clause",
+    "authors": [
+        {
+            "name": "Kartik Visweswaran",
+            "email": "[email protected]",
+            "homepage": "http://www.krajee.com/"
+        }
+    ],
+    "autoload": {
+        "psr-4": {"kartik\\": ""}
+    }
+}

css/fileinput.css

@@ -0,0 +1,91 @@
+/*!
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
+ * @package yii2-widgets
+ * @version 1.0.0
+ *
+ * File input styling for Twitter Bootstrap 3.0
+ * Built for Yii Framework 2.0
+ * Author: Kartik Visweswaran
+ * Year: 2013
+ * For more Yii related demos visit http://demos.krajee.com
+ */
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 999px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    background: red;
+    cursor: inherit;
+    display: block;
+}
+.file-caption-disabled {
+    background-color: #EEEEEE;
+    cursor: not-allowed;
+    opacity: 1;
+}
+.file-input .btn[disabled], .file-input .btn .disabled  {
+    cursor: not-allowed;
+}
+.file-preview {
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    padding: 5px;
+    width: 100%;
+    margin-bottom: 5px;
+}
+.file-preview-frame {
+    display:table;
+    margin: 8px;
+    height: 160px;
+    border: 1px solid #ddd;
+    box-shadow: 1px 1px 5px 0px #a2958a;
+    padding: 6px;
+    float: left;
+    text-align: center;
+}
+.file-preview-frame:hover {
+    background-color: #eee;
+    box-shadow: 2px 2px 5px 0px #333;
+}
+.file-preview-image  {
+    height: 150px;
+    vertical-align: text-center;
+}
+.file-preview-text {
+    display: table-cell;
+    width: 150px;
+    height: 150px;
+    color: #428bca;
+    font-size: 11px;
+    vertical-align:middle; 
+    text-align:center;
+}
+.file-preview-other {
+    display: table-cell;
+    width: 150px;
+    height: 150px;
+    font-family: Monaco, Consolas, monospace;
+    font-size: 11px;
+    vertical-align:middle; 
+    text-align:center;
+}
+.file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button {
+    display: none;
+}
+.loading {
+    background: transparent url('../img/loading.gif') no-repeat scroll center center content-box !important;
+}
+.wrap-indicator {
+    font-weight: bold;
+    color: #245269;
+    cursor: pointer;
+}

css/fileinput.min.css

@@ -0,0 +1,11 @@
+/*!
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
+ * @package yii2-widgets
+ * @version 1.0.0
+ *
+ * File input styling for Twitter Bootstrap 3.0
+ * Built for Yii Framework 2.0
+ * Author: Kartik Visweswaran
+ * Year: 2013
+ * For more Yii related demos visit http://demos.krajee.com
+ */.btn-file{position:relative;overflow:hidden}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:999px;text-align:right;filter:alpha(opacity=0);opacity:0;background:red;cursor:inherit;display:block}.file-caption-disabled{background-color:#eee;cursor:not-allowed;opacity:1}.file-input .btn[disabled],.file-input .btn .disabled{cursor:not-allowed}.file-preview{border-radius:5px;border:1px solid #ddd;padding:5px;width:100%;margin-bottom:5px}.file-preview-frame{display:table;margin:8px;height:160px;border:1px solid #ddd;box-shadow:1px 1px 5px 0 #a2958a;padding:6px;float:left;text-align:center}.file-preview-frame:hover{background-color:#eee;box-shadow:2px 2px 5px 0 #333}.file-preview-image{height:150px;vertical-align:text-center}.file-preview-text{display:table-cell;width:150px;height:150px;color:#428bca;font-size:11px;vertical-align:middle;text-align:center}.file-preview-other{display:table-cell;width:150px;height:150px;font-family:Monaco,Consolas,monospace;font-size:11px;vertical-align:middle;text-align:center}.file-input-new .file-preview,.file-input-new .close,.file-input-new .glyphicon-file,.file-input-new .fileinput-remove-button,.file-input-new .fileinput-upload-button{display:none}.loading{background:transparent url('../img/loading.gif') no-repeat scroll center center content-box!important}.wrap-indicator{font-weight:bold;color:#245269;cursor:pointer}

examples/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Krajee JQuery Plugins - &copy; Kartik</title>
+        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
+        <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+        <script src="../js/fileinput.js" type="text/javascript"></script>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Bootstrap File Input Example</h1>
+            <form enctype="multipart/form-data">
+                <div class="form-group">
+                    <input id="file-1" type="file" class="file" multiple=true data-preview-file-type="any">
+                </div>
+                <div class="form-group">
+                    <input id="file-2" type="file" class="file" readonly=true>
+                </div>
+                <div class="form-group">
+                    <button class="btn btn-primary">Submit</button>
+                    <button class="btn btn-default" type="reset">Reset</button>
+                </div>
+            </form>
+        </div>
+    </body>
+</html>

js/fileinput.js

@@ -0,0 +1,358 @@
+/*!
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
+ * @version 1.0.0
+ *
+ * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced 
+ * features including the FileReader API. This plugin is inspired by the blog article at
+ * http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/
+ * and Jasny's File Input plugin http://jasny.github.io/bootstrap/javascript/#fileinput
+ * 
+ * The plugin drastically enhances the file input to preview multiple files on the client before
+ * upload. In addition it provides the ability to preview content of images and text/htm files. 
+ * 
+ * Author: Kartik Visweswaran
+ * Copyright: 2013, Kartik Visweswaran, Krajee.com
+ * For more JQuery plugins visit http://plugins.krajee.com
+ * For more Yii related demos visit http://demos.krajee.com
+ */
+(function($) {
+    var MAIN_TEMPLATE =
+        '{preview}\n' +
+        '<div class="input-group {class}">\n' +
+        '   {caption}\n' +
+        '   <div class="input-group-btn">\n' +
+        '       {remove}\n' +
+        '       {upload}\n' +
+        '       {browse}\n' +
+        '   </div>\n' +
+        '</div>';
+
+    var PREVIEW_TEMPLATE =
+        '<div class="file-preview {class}">\n' +
+        '   <div class="file-preview-status text-center text-success"></div>\n' +
+        '   <div class="close fileinput-remove text-right">&times;</div>\n' +
+        '   <div class="file-preview-thumbnails"></div>\n' +
+        '   <div class="clearfix"></div>' +
+        '</div>';
+
+    var CAPTION_TEMPLATE =
+        '<div class="form-control file-caption {class}">\n' +
+        '   <span class="glyphicon glyphicon-file"></span> <span class="file-caption-name"></span>\n' +
+        '</div>';
+
+    var isEmpty = function(value, trim) {
+        return value === null || value === undefined || value == []
+            || value === '' || trim && $.trim(value) === '';
+    };
+    var getValue = function(options, param, value) {
+        return (isEmpty(options) || isEmpty(options[param])) ? value : options[param];
+    };
+    var isImageFile = function(type, name) {
+        return (typeof type !== "undefined") ? type.match('image.*') : name.match(/\.(gif|png|jpe?g)$/i);
+    };
+    var isTextFile = function(type, name) {
+        return (typeof type !== "undefined") ? type.match('text.*') : name.match(/\.(txt|md|csv|htm|html|php|ini)$/i);
+    };
+    var validateIE = function(content, validation) {
+        return "<!--[if " + validation + "]>" + content + "<![endif]-->";
+    };
+    var uniqId = function() {
+        return Math.round(new Date().getTime() + (Math.random() * 100));
+    };
+    var FileInput = function(element, options) {
+        this.$element = $(element);
+        this.showCaption = options.showCaption;
+        this.showPreview = options.showPreview;
+        this.showRemove = options.showRemove;
+        this.showUpload = options.showUpload;
+        this.showMessage = options.showMessage;
+        this.captionClass = options.captionClass;
+        this.previewClass = options.previewClass;
+        this.mainClass = options.mainClass;
+        this.mainTemplate = options.mainTemplate;
+        this.previewTemplate = options.previewTemplate;
+        this.captionTemplate = options.captionTemplate;
+        this.browseLabel = options.browseLabel;
+        this.browseIcon = options.browseIcon;
+        this.browseClass = options.browseClass;
+        this.removeLabel = options.removeLabel;
+        this.removeIcon = options.removeIcon;
+        this.removeClass = options.removeClass;
+        this.uploadLabel = options.uploadLabel;
+        this.uploadIcon = options.uploadIcon;
+        this.uploadClass = options.uploadClass;
+        this.uploadRoute = options.uploadRoute;
+        this.msgLoading = options.msgLoading;
+        this.msgProgress = options.msgProgress;
+        this.msgSelected = options.msgSelected;
+        this.previewFileType = options.previewFileType;
+        this.wrapTextLength = options.wrapTextLength;
+        this.wrapIndicator = options.wrapIndicator;
+        this.isDisabled = this.$element.attr('disabled') || this.$element.attr('readonly');
+        if (isEmpty(this.$element.attr('id'))) {
+            this.$element.attr('id', uniqId());
+        }
+        this.$container = this.createContainer();
+        /* Initialize plugin option parameters */
+        this.$captionContainer = getValue(options, 'elCaptionContainer', this.$container.find('.file-caption'));
+        this.$caption = getValue(options, 'elCaptionText', this.$container.find('.file-caption-name'));
+        this.$previewContainer = getValue(options, 'elPreviewContainer', this.$container.find('.file-preview'));
+        this.$preview = getValue(options, 'elPreviewImage', this.$container.find('.file-preview-thumbnails'));
+        this.$previewStatus = getValue(options, 'elPreviewStatus', this.$container.find('.file-preview-status'));
+        this.$name = this.$element.attr('name') || options.name;
+        this.$hidden = this.$container.find('input[type=hidden][name="' + this.$name + '"]');
+        this.isIE = (window.navigator.appName == 'Microsoft Internet Explorer');
+        if (this.$hidden.length === 0) {
+            this.$hidden = $('<input type="hidden" />');
+            this.$container.prepend(this.$hidden);
+        }
+        this.original = {
+            preview: this.$preview.html(),
+            hiddenVal: this.$hidden.val()
+        };
+        this.listen()
+    };
+
+    FileInput.prototype = {
+        constructor: FileInput,
+        listen: function() {
+            var self = this;
+            self.$element.on('change', $.proxy(self.change, self));
+            $(self.$element[0].form).on('reset', $.proxy(self.reset, self));
+            self.$container.find('.fileinput-remove').on('click', $.proxy(self.clear, self));
+        },
+        trigger: function(e) {
+            var self = this;
+            self.$element.trigger('click');
+            e.preventDefault();
+        },
+        clear: function(e) {
+            var self = this;
+            if (e) {
+                e.preventDefault();
+            }
+
+            self.$hidden.val('');
+            self.$hidden.attr('name', self.name);
+            self.$element.attr('name', '');
+
+            if (self.isIE) {
+                self.$container.after(self.$element);
+                self.$container.remove();
+            } else {
+                self.$element.val('');
+            }
+            if (e !== false) {
+                self.$element.trigger('change');
+                self.$element.trigger('fileclear');
+            }
+            self.$preview.html('');
+            self.$caption.html('');
+            self.$container.removeClass('file-input-new').addClass('file-input-new');
+        },
+        reset: function(e) {
+            var self = this;
+            self.clear(false);
+            self.$hidden.val(self.original.hiddenVal);
+            self.$preview.html(self.original.preview);
+            self.$container.find('.fileinput-filename').text('');
+            self.$element.trigger('filereset');
+        },
+        change: function(e) {
+            var self = this;
+            var elem = self.$element, files = elem.get(0).files, numFiles = files ? files.length : 1,
+                label = elem.val().replace(/\\/g, '/').replace(/.*\//, ''), preview = self.$preview,
+                container = self.$previewContainer, status = self.$previewStatus, msgLoading = self.msgLoading,
+                msgProgress = self.msgProgress, msgSelected = self.msgSelected, tfiles,
+                fileType = self.previewFileType, wrapLen = parseInt(self.wrapTextLength),
+                wrapInd = self.wrapIndicator;
+
+            if (e.target.files === undefined) {
+                tfiles = e.target && e.target.value ? [{name: e.target.value.replace(/^.+\\/, '')}] : [];
+            }
+            else {
+                tfiles = e.target.files;
+            }
+            if (tfiles.length === 0) {
+                return;
+            }
+            preview.html('');
+            var total = tfiles.length, self = self;
+            for (var i = 0; i < total; i++) {
+                (function(file) {
+                    var caption = file.name;
+                    var isImg = isImageFile(file.type, file.name);
+                    var isTxt = isTextFile(file.type, file.name);
+                    if (preview.length > 0 && (fileType == "any" ? (isImg || isTxt) : (fileType == "text" ? isTxt : isImg)) && typeof FileReader !== "undefined") {
+                        var reader = new FileReader();
+                        status.html(msgLoading);
+                        container.addClass('loading');
+                        reader.onload = function(theFile) {
+                            var content = '';
+                            if (isTxt) {
+                                var strText = theFile.target.result;
+                                if (strText.length > wrapLen) {
+                                    wrapInd = wrapInd.replace("{title}", strText);
+                                    strText = strText.substring(0, (wrapLen - 1)) + wrapInd;
+                                }
+                                content = '<div class="file-preview-frame"><div class="file-preview-text" title="' + caption + '">' + strText + '</div></div>';
+                            }
+                            else {
+                                content = '<div class="file-preview-frame"><img src="' + theFile.target.result + '" class="file-preview-image" title="' + caption + '" alt="' + caption + '"></div>';
+                            }
+                            preview.append("\n" + content);
+                            if (i >= total - 1) {
+                                container.removeClass('loading');
+                                status.html('');
+                            }
+                        };
+                        reader.onprogress = function(data) {
+                            if (data.lengthComputable) {
+                                var progress = parseInt(((data.loaded / data.total) * 100), 10);
+                                var msg = msgProgress.replace('{percent}', progress).replace('{file}', file.name);
+                                status.html(msg);
+                            }
+                        };
+                        if (isTxt) {
+                            reader.readAsText(file);
+                        }
+                        else {
+                            reader.readAsDataURL(file);
+                        }
+                    }
+                    else {
+                        preview.append("\n" + '<div class="file-preview-frame"><div class="file-preview-other"><h2><i class="glyphicon glyphicon-file"></i></h2>' + caption + '</div></div>');
+                    }
+                })(tfiles[i]);
+            }
+            var log = numFiles > 1 ? msgSelected.replace('{n}', numFiles) : label;
+            self.$caption.html(log);
+            self.$container.removeClass('file-input-new');
+            elem.trigger('fileselect', [numFiles, label]);
+        },
+        createContainer: function() {
+            var self = this;
+            var container = $(document.createElement("div")).attr({"class": 'file-input file-input-new'}).html(self.renderMain());
+            self.$element.before(container);
+            container.find('.btn-file').append(self.$element);
+            return container;
+        },
+        renderMain: function() {
+            var self = this;
+            var preview = self.previewTemplate.replace('{class}', self.previewClass);
+            var css = self.isDisabled ? self.captionClass + ' file-caption-disabled' : self.captionClass;
+            var caption = self.captionTemplate.replace('{class}', css);
+            return self.mainTemplate.replace('{class}', self.mainClass).
+                replace('{preview}', preview).
+                replace('{caption}', caption).
+                replace('{upload}', self.renderUpload()).
+                replace('{remove}', self.renderRemove()).
+                replace('{browse}', self.renderBrowse());
+        },
+        renderBrowse: function() {
+            var self = this, css = self.browseClass + ' btn-file', status = '';
+            if (self.isDisabled) {
+                status = ' disabled ';
+            }
+            return '<div class="' + css + '"' + status + '> ' + self.browseIcon + self.browseLabel + ' </div>';
+        },
+        renderRemove: function() {
+            var self = this, css = self.removeClass + ' fileinput-remove fileinput-remove-button', status = '';
+            if (self.isDisabled) {
+                status = ' disabled ';
+            }
+            return '<button type="button" class="' + css + '"' + status + '>' + self.removeIcon + self.removeLabel + '</button>';
+        },
+        renderUpload: function() {
+            var self = this, content = '', status = '';
+            if (self.isDisabled) {
+                status = ' disabled ';
+            }
+            if (isEmpty(self.uploadRoute)) {
+                content = '<button type="submit" class="' + self.uploadClass + '"' + status + '>' + self.uploadIcon + self.uploadLabel + '</button>';
+            }
+            else {
+                content = '<a href="' + self.uploadRoute + '" class="' + self.uploadClass + '"' + status + '>' + self.uploadIcon + self.uploadLabel + '</a>';
+            }
+            return content;
+        },
+    }
+
+    $.fn.fileinput = function(options) {
+        return this.each(function() {
+            var $this = $(this), data = $this.data('fileinput')
+            if (!data) {
+                $this.data('fileinput', (data = new FileInput(this, options)))
+            }
+            if (typeof options == 'string') {
+                data[options]()
+            }
+        })
+    };
+
+    //FileInput plugin definition
+    $.fn.fileinput = function(option) {
+        var args = Array.apply(null, arguments);
+        args.shift();
+        return this.each(function() {
+            var $this = $(this),
+                data = $this.data('fileinput'),
+                options = typeof option === 'object' && option;
+
+            if (!data) {
+                $this.data('fileinput', (data = new FileInput(this, $.extend({}, $.fn.fileinput.defaults, options, $(this).data()))));
+            }
+
+            if (typeof option === 'string') {
+                data[option].apply(data, args);
+            }
+        });
+    };
+
+    $.fn.fileinput.defaults = {
+        elCaptionContainer: null,
+        elCaptionText: null,
+        elPreviewContainer: null,
+        elPreviewImage: null,
+        elPreviewStatus: null,
+        showCaption: true,
+        showPreview: true,
+        showRemove: true,
+        showUpload: true,
+        showMessage: true,
+        captionClass: '',
+        previewClass: '',
+        mainClass: '',
+        mainTemplate: MAIN_TEMPLATE,
+        previewTemplate: PREVIEW_TEMPLATE,
+        captionTemplate: CAPTION_TEMPLATE,
+        browseLabel: 'Browse &hellip;',
+        browseIcon: '<i class="glyphicon glyphicon-folder-open"></i> &nbsp;',
+        browseClass: 'btn btn-primary',
+        removeLabel: 'Remove',
+        removeIcon: '<i class="glyphicon glyphicon-ban-circle"></i> ',
+        removeClass: 'btn btn-danger',
+        uploadLabel: 'Upload',
+        uploadIcon: '<i class="glyphicon glyphicon-upload"></i> ',
+        uploadClass: 'btn btn-default',
+        uploadRoute: null,
+        msgLoading: 'Loading &hellip;',
+        msgProgress: 'Loaded {percent}% of {file}',
+        msgSelected: '{n} files selected',
+        previewFileType: 'image',
+        wrapTextLength: 250,
+        wrapIndicator: ' <span class="wrap-indicator" title="{title}">[&hellip;]</span>'
+    };
+
+    /**
+     * Convert automatically file inputs with class 'file' 
+     * into a bootstrap fileinput control.
+     */
+    $(function() {
+        var $element = $('input.file[type=file]');
+        if ($element.length > 0) {
+            $element.fileinput();
+        }
+    });
+
+})(window.jQuery);