JavaScript - Upload and read XML file on the client side

Question

I'm working on this project that requires me to handle XML file on the client side. This is the scenario: The user gets to upload an XML file, the XML file's structure should be read at this point and table needs to be populated based on the information in the XML file. I don't have a problem creating the table and populating it, but what I'm wondering is can I process an XML file before uploading it to the server?

function parseXML(xml_file){
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //xmlhttp.open("GET", "books.xml", false);
        xmlhttp.open("GET",xml_file , false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML; 
        alert(xmlDoc);
    }

When I use the above code after processing the file, xmlDoc will be null ...

function handleFileSelect(evt) {
    // FileList object  
        var files = evt.target.files;
    //var contents = evt.target.result;
    //alert(contents);
    parseXML(files[0]);


    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>');
    }
    document.getElementById('file_list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

Is there a way to do this? Of course I could do this with php ... upload the file to the server, refresh the page and use JavaScript to read the recently uploaded file. But is there a way to achieve this without uploading the XML file to the server?

DOMParse requires the file path to open:

xhttp.open("GET","books.xml",false)

Is there a way to read the file using FileReader and pass the actual file instead of the path to xhttp.open?

FileReader to read the file, DomParser to parse the XML. — Ray Nicholus
– Ray Nicholus, Commented Jan 23, 2014 at 19:58
I looked at FileReader but I'm not sure how I can return the file with FileReader. At some point, DOMParser needs the file to open, so what should I supply as a paramater: xhttp.open("GET","books.xml",false); — Ali.B
– Ali.B, Commented Jan 23, 2014 at 20:40

Don Rhummy · Accepted Answer · 2014-01-23 20:53:53Z

2

This will only work in HTML5 compliant browsers:

Use FileReader to get the file data
Use DOMParser to parse the file as a string:

.

var parser = new DOMParser();
var doc = parser.parseFromString( fileAsString, "application/xml");

answered Jan 23, 2014 at 20:53

Don Rhummy

26.1k53 gold badges197 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali.B Over a year ago

so fileAsString will have the content of the file as string? What if the string is too large? I'm pretty sure the XML files in my project will contain a lot of information. Should the content size cause any problems?

Don Rhummy Over a year ago

@Ali.B fileAsString is something you create and "fill" with data in your ajax call. There is no standard limit on the size, but it will be limited by the RAM available to the browser as well as the CPU and JavaScript speed.

Collectives™ on Stack Overflow

JavaScript - Upload and read XML file on the client side

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related