letting user open an xml file on client and parse it using javascript

Question

I'm trying to let a users on my site to save and XML file one the local machine and then later to load them using the HTML file element.

Saving the file what done with iFrame.

When trying to let the user load the file i am getting exceptions all the time. I've tried every thing i could find over the web and can't seem to find the way to do it.

I am getting all kind of exception, like cross domain or XMLHttpRequest cannot load file:///C:/fakepath/Regions.xml. Cross origin requests are only supported for HTTP. Depending on the code i tried.

I read that HTML5 standard replace the url with "fakepath", and can't find solution for this. Is there no way to let the user load a file from his own computer to be edited? loading a specific file from server is not a problem but i want to give this freedom to the user and not decide for them what file to load, and also to let them save and load the xml on their computer and not the server

Is there a solution for this problem?

Found this codes but neither helped (and I've tried few other veriations of this):

1)

 var error = "";
                strFile = document.frmLoadFile.selectedFile.value;
                intPos = strFile.lastIndexOf("\\");
                strDirectory = strFile.substring(0, intPos);
                //alert(strDirectory);
                document.frmLoadFile.selectedFile.value = strDirectory;

                var file = 'file:\\\\\\' + document.frmLoadFile.selectedFile.value;
                try //Internet Explorer
                {
                    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                    xmlDoc.async = false;
                    xmlDoc.load(file);
                }
                catch (e) {
                    try //Firefox, Mozilla, Opera, etc.
                    {
                        xmlDoc = document.implementation.createDocument("", "", null);
                        xmlDoc.async = false;
                        xmlDoc.load(file);
                    }
                    catch (e) {
                        try //Google Chrome
                        {
                            var xmlhttp = new window.XMLHttpRequest();
                            xmlhttp.open("GET", file, false);
                            xmlhttp.send(null);
                            xmlDoc = xmlhttp.responseXML.documentElement;
                        }
                        catch (e) {
                            error = e.message;
                        }
                    }
                }

2)

var xmlDoc;
var xmlloaded = false;

function xml_initLibrary(file) {
importXML(file);
}

function importXML(xmlfile) {
try {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", xmlfile, false);
}
catch (Exception) {
    var ie = (typeof window.ActiveXObject != 'undefined');

    if (ie) {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        while (xmlDoc.readyState != 4) { };
        xmlDoc.load(xmlfile);
        xmlloaded = true;
        readXML();
    }
    else {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.onload = readXML;
        xmlDoc.load(xmlfile);
        xmlloaded = true;
    }
}

if (!xmlloaded) {
    xmlhttp.setRequestHeader('Content-Type', 'text/xml')
    xmlhttp.send("");
    xmlDoc = xmlhttp.responseXML;
    xmlloaded = true;
    readXML();
}
}

function readXML() {
//console.log(xmlDoc);
}

does any one knows if there is a way to fix this? of do you need to save the files on the server?

Thank you all very much Erez

Answer 1

I think you're looking for FileReader , new in HTML5. For IE < 10 you'll need to use the ActiveX FileSystemObject .

This code works for me on Chrome.

<script type="text/javascript">
function doit(e) {
  var files = e.target.files;
  var reader = new FileReader();
  reader.onload = function() {
    var parsed = new DOMParser().parseFromString(this.result, "text/xml");
    console.log(parsed);
  };
  reader.readAsText(files[0]);
}

document.getElementById("selectfile").addEventListener("change", doit, false);​
</script>

<input type="file" id="selectfile" />

http://jsfiddle.net/xKuPV/