Upload and parse xml file with a file upload button

I have created a HTML file with a button that get the tags from a xml file placed in the same directory as the HTML file. I am wondering if there is any way to turn this button into an uploading button to upload any XML file (from the desktop, for example) and fill the divs at the same time. Here is the code:

    <input type="button" value="Get XML data" id="users" onclick="xmlOpen()">
    
    <div id="red" style="color: red"></div>
    <div id="violet" style="color:violet"></div>
    <div id="blue" style="color:blue"></div>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};

function xmlOpen() {
xhttp.open("GET", "document.xml", true);
xhttp.send();
}

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName('title')[0];
    var y = x.childNodes[0];
    document.getElementById("red").innerHTML =
    y.nodeValue; 
    
    var x = xmlDoc.getElementsByTagName('ProjectID')[0];
    var y = x.childNodes[0];
    document.getElementById("violet").innerHTML =
    y.nodeValue; 
    
    var x = xmlDoc.getElementsByTagName('VendorName')[0];
    var y = x.childNodes[0];
    document.getElementById("blue").innerHTML =
    y.nodeValue;
}
</script>

Thanks!