From 33e39a68ff00b4c5ac1abc092946e83f9695e546 Mon Sep 17 00:00:00 2001
From: egea1981 <egea1981@hotmail.com>
Date: Wed, 11 Dec 2013 17:34:57 +0100
Subject: [PATCH 1/2] added Bootstrap 3 support and some options

Now it can add the button before the input, create button and input container when class are set, and can create Bootstrap input group.
---
 src/bootstrap-filestyle.js | 69 +++++++++++++++++++++++++++++++-------
 1 file changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/bootstrap-filestyle.js b/src/bootstrap-filestyle.js
index 6dda744..c6e6342 100644
--- a/src/bootstrap-filestyle.js
+++ b/src/bootstrap-filestyle.js
@@ -8,7 +8,7 @@
  */
 (function ($) {
     "use strict";
-    
+
     var Filestyle = function (element, options) {
         this.options = options;
         this.$elementFilestyle = [];
@@ -90,7 +90,7 @@
                 this.options.classButton = value;
                 this.$elementFilestyle.find('label').attr({'class': this.options.classButton});
                 if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
-                    this.$elementFilestyle.find('label i').addClass('icon-white');
+                    this.$elementFilestyle.find('label i').addClass('glyphicon glyphicon-folder-open');
                 } else {
                     this.$elementFilestyle.find('label i').removeClass('icon-white');
                 }
@@ -153,17 +153,42 @@
                 this.$element.attr({'id': id});
             }
 
-            html = this.htmlInput()+
-                 '<label for="'+id+'" class="'+this.options.classButton+'">'+
-                    this.htmlIcon()+
-                    '<span>'+this.options.buttonText+'</span>'+
-                 '</label>';
+            var inputContainerOpen = (this.options.classInputContainerClass != '') ? '<div class="'+this.options.classInputContainerClass+'">' : '';
+            var inputContainerClose = (inputContainerOpen != '') ? '</div>' : '';
+
+            var buttonContainerOpen = (this.options.classButtonContainerClass != '') ? '<div class="'+this.options.classButtonContainerClass+'">' : '';
+            var buttonContainerClose = (buttonContainerOpen != '') ? '</div>' : '';
+
+            if(this.options.buttonBefore)
+            {
+                html =
+                    buttonContainerOpen+
+                        '<label for="'+id+'" class="'+this.options.classButton+'">'+
+                            this.htmlIcon()+
+                            '<span>'+this.options.buttonText+'</span>'+
+                        '</label>'+
+                    buttonContainerClose+
+                    inputContainerOpen+
+                        this.htmlInput()+
+                    inputContainerClose;
+            } else {
+                html =
+                    inputContainerOpen+
+                        this.htmlInput()+
+                    inputContainerClose+
+                    buttonContainerOpen+
+                        '<label for="'+id+'" class="'+this.options.classButton+'">'+
+                            this.htmlIcon()+
+                        '<span>'+this.options.buttonText+'</span>'+
+                    '</label>'+
+                    buttonContainerClose;
+            }
 
-            this.$elementFilestyle = $('<div class="bootstrap-filestyle" style="display: inline;">'+html+'</div>');
+            this.$elementFilestyle = $('<div class="'+this.options.containerClass+'">'+html+'</div>');
 
             var $label = this.$elementFilestyle.find('label');
             var $labelFocusableContainer = $label.parent();
-            
+
             $labelFocusableContainer
                 .attr('tabindex', "0")
                 .keypress(function(e) {
@@ -239,9 +264,29 @@
         'buttonText': 'Choose file',
         'input': true,
         'icon': true,
-        'classButton': 'btn',
-        'classInput': 'input-large',
-        'classIcon': 'icon-folder-open'
+        'buttonBefore': false,
+
+        'containerClass': 'form-group', // bootstrap-filestyle
+        'classButtonContainerClass': '',
+        'classButton': 'btn btn-default',
+        'classInputContainerClass': '',
+        'classInput': 'form-control',
+        'classIcon': 'glyphicon glyphicon-folder-open'
+        
+        /*
+        Sample of creating a Bootstrap 3 input group:
+        
+        $(':file').filestyle({
+            buttonBefore: true,                             // set the button before the input
+            containerClass: 'input-group',                  // label (button) and input container class
+            classButtonContainerClass: 'input-group-btn',   // label container class (when set creates a div container)
+            classButton: 'btn btn-default btn-file',        // label (button) class
+            classInputContainerClass: '',                   // input container class (when set creates a div container)
+            classInput: 'form-control',                     // input class
+            classIcon: 'fa fa-folder-open',                 // button icon (using FontAwesome)
+        });
+        
+        */
     };
 
     $.fn.filestyle.noConflict = function () {

From 7e2093d648616416474d0ae1ff3df09eda7d494c Mon Sep 17 00:00:00 2001
From: egea1981 <egea1981@hotmail.com>
Date: Sun, 22 Dec 2013 12:42:36 +0100
Subject: [PATCH 2/2] some bugs fixed

---
 src/bootstrap-filestyle.js | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/bootstrap-filestyle.js b/src/bootstrap-filestyle.js
index c6e6342..3a89792 100644
--- a/src/bootstrap-filestyle.js
+++ b/src/bootstrap-filestyle.js
@@ -90,7 +90,7 @@
                 this.options.classButton = value;
                 this.$elementFilestyle.find('label').attr({'class': this.options.classButton});
                 if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
-                    this.$elementFilestyle.find('label i').addClass('glyphicon glyphicon-folder-open');
+                    this.$elementFilestyle.find('label i').addClass('icon-white');
                 } else {
                     this.$elementFilestyle.find('label i').removeClass('icon-white');
                 }
@@ -184,7 +184,7 @@
                     buttonContainerClose;
             }
 
-            this.$elementFilestyle = $('<div class="'+this.options.containerClass+'">'+html+'</div>');
+            this.$elementFilestyle = $('<div class="'+this.options.containerClass+' bootstrap-filestyle">'+html+'</div>');
 
             var $label = this.$elementFilestyle.find('label');
             var $labelFocusableContainer = $label.parent();
@@ -272,21 +272,6 @@
         'classInputContainerClass': '',
         'classInput': 'form-control',
         'classIcon': 'glyphicon glyphicon-folder-open'
-        
-        /*
-        Sample of creating a Bootstrap 3 input group:
-        
-        $(':file').filestyle({
-            buttonBefore: true,                             // set the button before the input
-            containerClass: 'input-group',                  // label (button) and input container class
-            classButtonContainerClass: 'input-group-btn',   // label container class (when set creates a div container)
-            classButton: 'btn btn-default btn-file',        // label (button) class
-            classInputContainerClass: '',                   // input container class (when set creates a div container)
-            classInput: 'form-control',                     // input class
-            classIcon: 'fa fa-folder-open',                 // button icon (using FontAwesome)
-        });
-        
-        */
     };
 
     $.fn.filestyle.noConflict = function () {