I built an HTML5/JS web application that performs fairly plicated mathematical calculations based on user-provided data. The application works by having several different input fields where users manually type in the information, then submit it for processing. Much of the information that the users input will not change very often (but often enough where hard-coding it would not be economical), and I was interested in seeing if there was a way to allow users to upload XML files with all of the required data custom tailored to each user. The fields would be filled automatically. The user would change their particular XML file as needed to reflect new values prior to getting new putations. Just as an aside, anything server-side is not an option.

Is it possible using HTML5/JS to upload an XML file, read the file contents, and fill input fields automatically?

I built an HTML5/JS web application that performs fairly plicated mathematical calculations based on user-provided data. The application works by having several different input fields where users manually type in the information, then submit it for processing. Much of the information that the users input will not change very often (but often enough where hard-coding it would not be economical), and I was interested in seeing if there was a way to allow users to upload XML files with all of the required data custom tailored to each user. The fields would be filled automatically. The user would change their particular XML file as needed to reflect new values prior to getting new putations. Just as an aside, anything server-side is not an option.

Is it possible using HTML5/JS to upload an XML file, read the file contents, and fill input fields automatically?

• javascript
• xml
• html
• file-upload

Share Improve this question Follow asked Jun 29, 2013 at 0:21 user2533653user2533653 1111 silver badge22 bronze badges 4

• Does the uploaded file have to be in XML format ? – G. Cito Commented Jun 29, 2013 at 0:39
• Yes, this is possible and no server side code is required. Have a look at the documentation for the FileReader object (specifically the readAsText method) for more info. – Ray Nicholus Commented Jun 29, 2013 at 1:43
• It doesn't have to be XML; It just seemed like XML was a decent promise between the user being able to easily edit their own information prior to upload and being able to easily map the XML data to their respective fields. I'll check out filereader as well. – user2533653 Commented Jun 29, 2013 at 1:58
• ok, caniuse./filereader API is cool too – vladkras Commented Jun 29, 2013 at 2:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

As I mentioned in my ment, you can acplish this task without any server-side intervention, provided the browser has proper File API and FileReader support.

Let's say you have a file input element, where your user will select one of these XML files:

<input id="fileChooser" type="file">

Now, you can access whatever file the user selects, grab the associated text/XML, parse it, and assign the values to text input fields on your page. Your code would look something like this:

var fileChooser = document.getElementById('fileChooser');

function parseTextAsXml(text) {
    var parser = new DOMParser(),
        xmlDom = parser.parseFromString(text, "text/xml");

    //now, extract items from xmlDom and assign to appropriate text input fields
}

function waitForTextReadComplete(reader) {
    reader.onloadend = function(event) {
        var text = event.target.result;

        parseTextAsXml(text);
    }
}

function handleFileSelection() {
    var file = fileChooser.files[0],
        reader = new FileReader();

    waitForTextReadComplete(reader);
    reader.readAsText(file);
}

fileChooser.addEventListener('change', handleFileSelection, false);

Sounds like an ideal candidate for a Saxon-CE application.

However, I don't think you can make it work without any kind of server support. You talk of "uploading" files; that means uploading to the server, and you need to do something on the server to make that possible. It's not possible for a browser application to interact with filestore on the local machine unless you ask your users to turn off security settings which would be unwise (and I don't even know if that's possible any more).

you must use some server-side code anyway, because JS doesn't allow to upload file and even access it on users puter

so you can not get the contents of this file if not uploading it to server (upd: actually you can do it, so this is only a suggestion)

but you can do it in very simple way e.g. submit a form with file input

<form enctype="multipart/form-data" action="/path/to/script" method="post">
    <input name="myFile" type="file" />
</form>

to send it using ajax and get the contents of it as a response from the easy script like this:

<?php
if (!$_FILES["myFile"]["error"]) {
    header("Content-Type: text/xml");
    echo file_get_contents($_FILES["myFile"]["tmp_name"]);
}
?>

I'm using php, but I'm sure it's not a problem to perform it in another language. Of course I know that file uploading is supported only by XHR2 in major browsers, but as far as you are asking about HTML5 this solution will work.

Next step is to add success handler to your ajax request

success: function(data) {
// and parse it
if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(data,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(data); 
  }
}

Great tutorial here. Now you can access xml contents using xmlDoc var like simple DOM document.