Populate a html form with xml file inserted by user

Question

Trying to read xml file inserted by user to populate html form. Need to convert xml file to string var to then create a xmlDoc element and read the file to compare the input name of the form with the value inserted in the xml file tag "key".

function readFile(event) {
        "use strict";
      document.body.textContent = event.target.result;
      console.log(event.target.result);
        var form=document.getElementById("XmlForm");
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(event.target.result, 'text/xml');
        populateData(form,xmlDoc);
    }

    function changeFile() {
        "use strict";
        var input=document.getElementById("fileChooser");
      var file = input.file;
      var reader = new FileReader();
      reader.addEventListener('load', readFile);
      reader.readAsText(file);
    }

    function populateData(form, xmlDom){ 
    "use strict";
    var root = xmlDom.documentElement;
    var metadataNodes = root.querySelectorAll('customMetaData');
    var map = {};
      metadataNodes.forEach(function(metadata) {
        var key = metadata.querySelector('key').textContent;
        var value = metadata.querySelector('value').textContent;
        map[key] = value;
      });
      for (var i = 0; i <form.elements.length; i++) {
        var input = form.elements[i];
        if(input.name){ 
            input.value = map[input.name] || '';     
        }
      }
    } 

Exemple of xml file the user insert. Always with this tags.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssetInfo xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
<assetSubType>undefined</assetSubType>
<state>importado</state>
<name>happyrock.jpg</name>
  <customMetaData>
     <key>Data</key>
     <value>2018-06-04</value>
  </customMetaData>
  <customMetaData>
     <key>Hora</key>
     <value>12:12</value>
  </customMetaData>
  <customMetaData>
     <key>Sala</key>
     <value>sala 2</value>
  </customMetaData>
  <customMetaData>
     <key>Edifício</key>
     <value>casa</value>
  </customMetaData>
  <customMetaData>
     <key>Cidade</key>
     <value>Labruge</value>
  </customMetaData>
  <customMetaData>
     <key>País</key>
     <value>portugal</value>
  </customMetaData>
</AssetInfo>

Part of the html form trying to populate with the xml file

<form id="XmlForm" name="xmlForm" action="" method="post">

    <div id="form1">    
        <p>Local</p>
        <input class="a" type="date" name="Data" id="Data" placeholder="Data" />
        <input class="a" type="time" name="Hora" id="Hora" placeholder="Hora" />
        <input class="a" type="text" name="Sala" id="Sala" placeholder="Sala" />
        <input class="a" type="text" name="Edifício" id="Edifício" placeholder="Edifício" />
        <input class="a" type="text" name="Cidade" id="Cidade" placeholder="Cidade" />
        <input class="a" type="text" name="País" id="País" placeholder="País" />
     </div>
</form>

Answer 1

Two things, firstly the files in a file input are accessed via the files property, not file. Secondly you have a line of code that wipes out your form, which I commented out.

function readFile(event) {
        "use strict";
        //document.body.textContent = event.target.result; // <-- here
        //console.log(event.target.result);
        var form=document.getElementById("XmlForm");
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(event.target.result, 'text/xml');
        populateData(form,xmlDoc);
    }

    function changeFile() {
        "use strict";
        var input=document.getElementById("fileChooser");
      var file = input.files[0];  //<-- here
      var reader = new FileReader();
      reader.addEventListener('load', readFile);
      reader.readAsText(file);
    }

    function populateData(form, xmlDom){ 
    "use strict";
    var root = xmlDom.documentElement;
    var metadataNodes = root.querySelectorAll('customMetaData');
    var map = {};
      metadataNodes.forEach(function(metadata) {
        var key = metadata.querySelector('key').textContent;
        var value = metadata.querySelector('value').textContent;
        map[key] = value;
      });
      for (var i = 0; i <form.elements.length; i++) {
        var input = form.elements[i];
        if(input.name){ 
            input.value = map[input.name] || '';     
        }
      }
    } 
document.addEventListener('DOMContentLoaded', function(){
  document.querySelector('[type=file]').onchange = changeFile;
  
});

<form id="XmlForm" name="xmlForm" action="" method="post">

    <div id="form1">    
        <p>Local</p>
        <input class="a" type="date" name="Data" id="Data" placeholder="Data" />
        <input class="a" type="time" name="Hora" id="Hora" placeholder="Hora" />
        <input class="a" type="text" name="Sala" id="Sala" placeholder="Sala" />
        <input class="a" type="text" name="Edifício" id="Edifício" placeholder="Edifício" />
        <input class="a" type="text" name="Cidade" id="Cidade" placeholder="Cidade" />
        <input class="a" type="text" name="País" id="País" placeholder="País" />
     </div>
</form>
<input type=file id=fileChooser>