2

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?

Community
  • 1
  • 1
Max Strater
  • 540
  • 6
  • 17

1 Answers1

7

(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>
jotch
  • 5,416
  • 2
  • 12
  • 20
Resident Ivo
  • 94
  • 4
  • 7
    I realize this is a bit old, but this absolutely does not require jquery. Replace `$('#myInput').click();` with `document.getElementById("myInput").click()` and it'll work just the same. – nondefault Apr 11 '16 at 00:59
  • You can't programmatically trigger a click event for a file input for security reasons. – Jay Mar 25 '22 at 19:39