Fill HTML5 Input Fields with Uploaded XML File

Question

I built an HTML5/JS web application that performs fairly complicated 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 computations. 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?

Yes, this is possible and no server side code is required. Have a look at the documentation for the [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) object (specifically the readAsText method) for more info. — Ray Nicholus, Jun 29 '13 at 01:43
It doesn't have to be XML; It just seemed like XML was a decent compromise 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, Jun 29 '13 at 01:58

score 7 · Answer 1 · answered Jun 30 '13 at 19:51

As I mentioned in my comment, you can accomplish 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);

score -1 · Answer 2 · answered Jun 29 '13 at 07:57

-1

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).

answered Jun 29 '13 at 07:57

Michael Kay

156,231
11
92
164

It would be nice if whoever it was who downvoted this answer (and that from @vladkras) would explain why. If my facts are wrong, I would love to be corrected. – Michael Kay Jun 29 '13 at 23:37
I down voted both answers. I've already explained how to do this in my comment. The reiterate, no server side code is needed to simply read an XML file submitted via a file input field. – Ray Nicholus Jun 30 '13 at 04:21
Thanks for the reference to HTML5 FileReader. I was unaware of this. It seems you're the expert on this area... – Michael Kay Jun 30 '13 at 19:21
I intended to type up a proper answer instead of a comment, but I have not been near a computer all weekend. I'll type something up now... – Ray Nicholus Jun 30 '13 at 19:32

score -2 · Answer 3 · edited May 23 '17 at 12:25

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

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.

Fill HTML5 Input Fields with Uploaded XML File

3 Answers3

Linked