File Not Found - File System API, Javascript

Question

Using a local Apache web server for testing, with Chrome (33) and a very basic piece of code

function onInitFs(fs) {
    fs.root.getFile("productinfo.xml", {}, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(e) {
                .
                .
                .
            };
            reader.readAsText(file);
        }, errorHandler);
    }, errorHandler);
}

window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler); 

No matter where I put the file (productinfo.xml), I get:

A requested file or directory could not be found at the time an operation was processed

My root directory is C:\xampp\htdocs so putting productinfo.xml there should work?

Answer 1

As the comments pointed out, you're going to want to make an AJAX call - you don't obtain the file without grabbing it from the server. I'm not certain if you are going to just stick with making the AJAX call everytime. However, working with the HTML5-File system can keep you from re-grabbing the XML every-time.

The code/my answer below is to grab the file locally when it exists and grab it from the server when it doesn't exist locally your code would look like the following (or something very similar - I copy and pasted a lot of working code and tried to abstract some components):

Function call to get the xml file, whether it's locally or from the server, see code below - make sure fs is initialized before making the following call, this is done by setting it to a global variable in your onInitFs called in the request File system function

getFile("productinfo.xml",function(textDataFromFile){
  console.log("some callback function"}
  //your ... code should be handled here 
);

the AJAX call to get your file from the server

function obtainFileFromServer(filename,callback){
  var xhr2 = new XMLHttpRequest();
  xhr2.onload = function(e){
      writeToFile(filename,xhr2.response,callback);
  }
  xhr2.open('GET', "path/to/"+filename, true);
  xhr2.send();
}

Reading from the HTML5-File system.

function getFile(filename,callback){
  fs.root.getFile(filename, {create:false}, function(fileEntry) {
    fileEntry.file(function(file) {
      var errorHandler2 = function(e){
      switch(e.name){
        case "NotFoundError":
            //if the productinfo.xml is not found, then go get it from the server
            //In you're callback you'll want to also recall the getFile
            obtainFileFromServer(function(){getFile(filename,callback);});
            break;
        default:
            console.log(e);
            break;
        }
      }
      var reader = new FileReader();
      reader.onloadend = function(e) {
        callback(this.result);
      };
      reader.readAsText(file);
    }, errorHandler2);
  }, errorHandler);
}

Writing to HTML5 File-system

There are two ways you can look at the write method (writeToFile()), in the event you are replacing an old file, and the new one happens to be shorter, you'll want to truncate it before writing (you can only truncate immediately after opening the file - hence why it happens first). That appears to be outside of the scope of this question. I'm including the code to truncate, but not including the logic for figuring out whether or not you need to re-download the sample/if it is old.

function writeToFile(filename,data,callback){
    fs.root.getFile(filename, {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {
        writer.onwriteend = function(e) {
            //we've truncated the file, now write the data
            writer.onwriteend = function(e){
                callback();
            }
            var blob = new Blob([data]);
            writer.write(blob);
        };
        writer.truncate(0);
    }, errorHandler);
  }, errorHandler);
}