0

Note: This is all Client Side

I am trying to upload a XML file and show the value in a text input. I am trying to use AJAX to post the file. It works fine in Firefox but it's not working in Chrome and IE. Chrome shows the error below:

XMLHttpRequest cannot load file:///C:/fakepath/data.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Demo: https://jsfiddle.net/6bgzgz0z/

<cats>
    <cat id='output'>
        <name>George</name>
        <gender>male</gender>
        <color>white-mustard</color>
        <age>5 years</age>
    </cat>
    <cat id='output1'>
        <name>Pety</name>
        <gender>female</gender>
        <color>white-black-mustard</color>
        <age>3</age>
    </cat>
</cats>

Above is the XML I am trying to upload but not getting the results.

Note: Everything is supposed to be Client Side

Deepankar
  • 138
  • 1
  • 14

1 Answers1

0

Given your requirement that you wish to do this on the client side only then AJAX is redundant as it is used to make requests between the client and the server, and it is also not used to read a file stored on the client.

You can achieve what you require by using the FileReader() class. You can use that to read the XML before parsing and traversing the data to find the information you require. Try this:

$('#submit').click(function() {
    var files = $('#file')[0].files;
    var reader = new FileReader();
    reader.onload = function() {
        var xml = $.parseXML(this.result);
        $(xml).find('cat').each(function() {
            var catName = $(this).find('name').text();
            console.log(catName);
            $('#' + this.id).val(catName);
        })
    };
    reader.readAsText(files[0]);
});

Updated fiddle

To see it working fully you would need to create a separate XML file to be selected in the file picker with the format you mentioned:

<cats>
    <cat id='output'>
        <name>George</name>
        <gender>male</gender>
        <color>white-mustard</color>
        <age>5 years</age>
    </cat>
    <cat id='output1'>
        <name>Pety</name>
        <gender>female</gender>
        <color>white-black-mustard</color>
        <age>3</age>
    </cat>
</cats>

If you want to see the XML parsing working, here's a simplified fiddle pulling out the basic information.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • thank you for your answer. This is all supported in html5 updated browsers. But even if I shift to IE 8 the error appears big time. The users that I am targeting use old browsers hence the worry. – Deepankar Dec 28 '15 at 12:30
  • In which case you will have to use an ActiveX fallback, which will not be pretty. See [this answer](http://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers) for more information. Note that you will have to rely on the user allowing ActiveX controls to be executed on the page, which may lead to security warnings. There is no workaround for this if you *have* to do it on the client side. – Rory McCrossan Dec 28 '15 at 12:31