diff --git a/css/main.css b/css/main.css index cbba631a4c02becae54f527ab157ea80a6ee5406..5b3ec6d8453bde624f2632f016a883a755cd5b9a 100644 --- a/css/main.css +++ b/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; +} diff --git a/js/importSTL.js b/js/importSTL.js index 2cacc56cf67e0152370fe658c7ada1df3d7c592d..36c145cc0f619af2a0ab69e61471c4f7de7d277f 100644 --- a/js/importSTL.js +++ b/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 diff --git a/main.html b/main.html index 64410d26918bb9bc51f21f66665d67926a2166a7..2e37a72e591b9edda4a76a5dcfdeaef3ee25d798 100644 --- a/main.html +++ b/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