added file input support

Author: Federico Zivolo

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;
 }

demo/index.html

@@ -1284,6 +1284,13 @@ <h1 id="forms">Forms</h1>
                                             </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">

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;
+}

less/test.css

@@ -1,4 +1,4 @@
-/* Generated by less 1.7.0 */
+/* Generated by less 1.7.5 */
 .btn-default {
   color: #000000;
 }

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);
+    });
 });