How can I open a file into Ace text editor?

How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.

 var editor = ace.edit("editor");
            editor.setTheme("ace/theme/monokai");
            editor.session.setMode("ace/mode/html");
            // editor.setTheme("ace/theme/themeHere")
            // editor.session.setmode("ace/mode/languageHere")

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ACE HTML Editor</title>
        <!-- Put editor language e.g.: Ace HTML Editor -->
        <style type="text/css" media="screen">
            #editor {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>
        <meta charset="UTF-8">
        <!-- Defines character set -->
        <link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
        <!-- CSS Stylesheet -->
        <link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
        <!-- Favicon -->
        <script type="text/javascript" src="../JavaScript/index.js"></script>
        <!-- JavaScript Index -->
    </head>
    <body>
        <div id="editnav">
            <input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
            <input type="button" id="openbtn" onclick="openCode()" value="Open">
            <input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
        </div>
        <input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
        <div id="editor">&lt;!DOCTYPE html>
&lt;html>
    &lt;head lang="">
        &lt;meta charset="">
        &lt;link type="text/css" rel="stylesheet" href="">
        &lt;!-- CSS Stylesheet -->
        &lt;link type="image/x-icon" rel="shortcut icon" href="">
        &lt;!-- Favicon -->
        &lt;title>&lt;/title>
    &lt;/head>
    &lt;body>
        &lt;p>Ace HTML Editor&lt;/p>
    &lt;/body>
&lt;/html></div>
        <!-- In this div, put filler text -->
        <!-- use &lt; for < -->
        <script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>

    </body>
</html>

Solution

You can use the file input element as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ACE HTML Editor</title>
        <style type="text/css" media="screen">
            #editor {
                position: absolute;
                top: 3em;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>
        <meta charset="UTF-8">
        
    </head>
    <body>
        <div id="editnav">
            <input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
            <input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
            <input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
        </div>
        <div id="editor"></div> 
        <script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var editor = ace.edit("editor", {
                theme: "ace/theme/monokai",
                mode: "ace/mode/html",
                placeholder: "choose file to edit"
            }); 
            function openCode(files) {
                var file = files[0]
                if (!file) return;
                var modelist = ace.require("ace/ext/modelist")
                var modeName = modelist.getModeForPath(file.name).mode 
                editor.session.setMode(modeName)
                reader = new FileReader();
                reader.onload = function() {
                    editor.session.setValue(reader.result)
                }  
                reader.readAsText(file) 
            }
        </script>
    </body>
</html>