stl uploader

css/main.css

@@ -42,3 +42,24 @@ body {
 nav .btn {
     margin-top: 5px;
 }
+
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    outline: none;
+    background: white;
+    cursor: inherit;
+    display: block;
+}
+
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}

js/importSTL.js

@@ -6,7 +6,7 @@ $(function(){
 
     threeMain = threeMain || {};
 
-    function loadSTL(filename){
+    function loadSTL(file){
 
         var loader = new THREE.STLLoader();
   	    loader.addEventListener( 'load', function (e) {
@@ -14,12 +14,30 @@ $(function(){
   		    threeMain.scene.add( new THREE.Mesh( geometry ) );
         });
 
-  	    loader.load( 'data/' + filename );
+  	    loader.load(file);
     }
 
     $(".stlImport").click(function(e){
         e.preventDefault();
-        loadSTL($(this).data("file"));
+        loadSTL('data/' + $(this).data("file"));
     });
 
+    $("#uploadSTL").change(function() {
+        var input = $(this),
+        numFiles = input.get(0).files ? input.get(0).files.length : 1,
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+        input.trigger('fileselect', [numFiles, label, input.get(0).files]);
+    });
+
+     $('.btn-file :file').on('fileselect', function(event, numFiles, label, files) {
+         var reader = new FileReader();
+         reader.readAsDataURL(files[0]);
+         reader.onload = (function() {
+            return function(e) {
+                loadSTL(e.target.result);
+            }
+        })();
+        console.log("loaded" + label);
+     });
+
 });
\ No newline at end of file

main.html

@@ -72,7 +72,10 @@
 <div id="importGeometry" class="row navMenu">
     <div class="row demo-row">
         <div class="col-xs-3">
-          <a href="#fakelink" class="btn btn-block btn-lg btn-default">Upload STL</a>
+           <span class="btn btn-default btn-file">
+                Upload STL<input id="uploadSTL" type="file">
+           </span>
+          <!--<a id="uploadSTL" href="#fakelink" class="btn btn-block btn-lg btn-default">Upload STL</a>-->
         </div>
         <div class="col-xs-1">
             OR