Search code examples
javascripthtmlinput-type-filedat.gui

Load a file using a dat.GUI button?


I already know how to create buttons using dat.GUI (passing in functions as described in this question: Is it possible to create a button using dat.gui). I want to make a button that triggers a load file event like you would do with <input type="file" id="file" name="file" enctype="multipart/form-data" /> Is this possible?


Solution

  • (Based on Programmatically trigger "select file" dialog box)

    You call the hidden input button from the dat.GUI button's function.

    <input id="myInput" type="file" style="visibility:hidden" />
    
    <script>
    var params = {
        loadFile : function() { 
                document.getElementById('myInput').click();
        }
    };
    var gui = new dat.GUI();
    gui.add(params, 'loadFile').name('Load CSV file');
    </script>