I am trying to read in a file and update XML. Right now I am trying to implement this using the HTML5 API and the DOMParser, but I'm having some trouble.
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
parser=new DOMParser();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Print the contents of the file
// var span = document.createElement('span');
xmlDoc=parser.parseFromString(e.target.result,"text/xml");
try{
DistributomeXML_Objects=xmlDoc.documentElement.childNodes;
}catch(error){
DistributomeXML_Objects=xmlDoc.childNodes;
}
// document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the file
//reader.readAsDataText(f,UTF-8);
reader.readAsText(f);
}
//xmlDoc.getElementsByTagName("distributome").item(0).appendChild(node);
traverseXML(false, null, DistributomeXML_Objects, distributome.nodes, distributome.edges, distributome.references, distributomeNodes, referenceNodes);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
I took some leads from
HTML5 File api, reading in an xml/text file and displaying it on the page?
and my own earlier question
Dynamically populating webpage with uploaded file using PHP/JS
I think there's an error in my code that's leading to the XML Document not being created and I'm not quite able to spot it and would be grateful for any help.
Thanks in advance