From d2ce2c6b85295e748802554a704386b8f153d085 Mon Sep 17 00:00:00 2001
From: Federico Zivolo <zivolof@p2000.it>
Date: Thu, 18 Sep 2014 10:40:57 +0200
Subject: [PATCH] added file input support

---
 css-compiled/material.css | 11 +++++++++++
 demo/index.html           |  7 +++++++
 less/inputs.less          | 14 ++++++++++++++
 less/test.css             |  2 +-
 scripts/material.js       | 29 ++++++++++++++++++++++++++++-
 5 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/css-compiled/material.css b/css-compiled/material.css
index 703e59a6..a02685a7 100644
--- a/css-compiled/material.css
+++ b/css-compiled/material.css
@@ -1798,6 +1798,17 @@ select.form-control.focus {
     opacity: 0;
   }
 }
+.form-control-wrapper input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
 legend {
   border-bottom: 0;
 }
diff --git a/demo/index.html b/demo/index.html
index 16f92bfb..9e124f77 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1284,6 +1284,13 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="form-group">
+                                        <label for="inputFile" class="col-lg-2 control-label">File</label>
+                                        <div class="col-lg-10">
+                                            <input type="text" readonly class="form-control floating-label" placeholder="Browse...">
+                                            <input type="file" id="inputFile" multiple>
+                                        </div>
+                                    </div>
                                     <div class="form-group">
                                         <label for="textArea" class="col-lg-2 control-label">Textarea</label>
                                         <div class="col-lg-10">
diff --git a/less/inputs.less b/less/inputs.less
index 421ceb65..3d2d491b 100644
--- a/less/inputs.less
+++ b/less/inputs.less
@@ -205,3 +205,17 @@ select.form-control {
 @-ms-keyframes input-highlight {.keyframe-input-highlight()}
 @-o-keyframes input-highlight {.keyframe-input-highlight()}
 @keyframes input-highlight {.keyframe-input-highlight()}
+
+
+// Input files (kinda hack)
+.form-control-wrapper input[type=file] {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
diff --git a/less/test.css b/less/test.css
index 03617ac4..3e5b0562 100644
--- a/less/test.css
+++ b/less/test.css
@@ -1,4 +1,4 @@
-/* Generated by less 1.7.0 */
+/* Generated by less 1.7.5 */
 .btn-default {
   color: #000000;
 }
diff --git a/scripts/material.js b/scripts/material.js
index 2bd66527..d84fcd04 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -22,6 +22,12 @@ $(function (){
         if ($(this).val() === "") {
             $(this).addClass("empty");
         }
+
+        if ($(this).parent().next().is("[type=file]")) {
+            $(this).parent().addClass("fileinput");
+            var $input = $(this).parent().next().detach();
+            $(this).after($input);
+        }
     });
 
     $(document).on("keyup change", ".form-control", function() {
@@ -31,8 +37,29 @@ $(function (){
             $(this).addClass("empty");
         }
     });
-    $(document).on("keydown", ".form-control", function() {
+    $(document).on("keydown change", ".form-control", function() {
         $(this).removeClass("empty");
     });
+    $(document)
+    .on("focus", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").addClass("focus");
+    })
+    .on("blur", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").removeClass("focus");
+    })
+    .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+        var value = "";
+        $.each($(this)[0].files, function(i, file) {
+            console.log(file);
+            value += file.name + ", ";
+        });
+        value = value.substring(0, value.length - 2);
+        if (value) {
+            $(this).prev().removeClass("empty");
+        } else {
+            $(this).prev().addClass("empty");
+        }
+        $(this).prev().val(value);
+    });
 });