I’m using the HTML5 FileAPI with Chorome 21 to create, read and modify “users.xml” file, everything works just fine the first time the code read and modify the xml, but after the first time, the reader doesn’t read the xml properly, seems like the freader ( my FileReader var object) keeps the previous result and mess up the new reading operation. The original xml:
<?xml version='1.0' encoding='utf-8'?><users></users>
My code read that and add a new child node:
fs.root.getFile('users.xml', {}, function(fileEntry) {
fileEntry.file(function(file) {
var freader = new FileReader();
freader.onloadend = function(theFile) {
console.log("before: " + this.result);
var strcontent = this.result;
fileEntry.createWriter(function(fileWriter) {
var parsed = new DOMParser().parseFromString(strcontent, "text/xml");
var users= parsed.getElementsByTagName("users")[0];
var user = parsed.createElement("user");
user.setAttribute('id',txt_rfc.value);
var name = parsed.createElement("name");
var textname = parsed.createTextNode(txt_name.value);
name .appendChild(textname);
user.appendChild(name);
users.appendChild(user);
var serializer = new XMLSerializer();
var str = serializer.serializeToString(parsed);
console.log("after: " + str);
var bb = new Blob([str],{type:'charset=utf-8'});
fileWriter.write(bb);
}, errorHandler);
};
freader.readAsText(file);
}, errorHandler);
}, errorHandler);
}
The first execution read and writes the xml properly like this:
<?xml version="1.0" encoding="utf-8"?><users><user id="1"><name>John</name></user></users>
But the next execution FileReader is showing the reading result like this (which is not true and is wrong):
<?xml version='1.0' encoding='utf-8'?><users/>ser id="1"><name>John</name></user></users>
After that my code can’t continue writing since the xml reading result is “corrupted”. Looks like the FileReader needs to be “cleared” or something….any ideas? thx!!
Ok, I found out what the problem is the asynchronous way that HTML5 FileSystem API works, it’s a little tricky sometimes.
My code snippet is a simplified version of my real code; my real code makes multiple modifications to multiple files, at some point I was calling the original function several times consecutively, but since the FileSystem API behavior is asynchronous, the different instances of the same function were trying to modify the same file at the same time, and this was “messing up” the file. So the posted snippet code works fine, I just added code to check out if the previous modification is completed before to call the function again.