Writing to and reading files using cordova file plugin

Question

I'm trying to create an ionicv1 app which includes filling in a form and saving it to a file and everytime something new is written to the file the file is read all done using cordova file plugin. I'm trying to use these examples but they don't work for me and I don't know why.

Here is my file writing function:

function writeToFile(fileName, data) {
  data = JSON.stringify(data, null, '\t');
  window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(directorEntry) {
    directorEntry.getFile(filename, { create: true }, function(fileEntry) {
      fileEntry.createWriter(function(fileWriter) {

        fileWriter.onwriteend = function(e) /* E */ {
          //Success callback
          document.getElementById("testwrite").innerHTML = "Write successful";
        };

        fileWriter.onerror = function(e) /* E */ {
          //Error callback
          document.getElementById("testwrite").innerHTML = "Write unsuccessful";
        };

        var blob = new Blob([data], { type: 'text/plain' });
        fileWriter.write(blob);
      });
    });
  });
}

It doesn't show the 'write successful' or 'write unsuccessful' on my page so obviously it doesn't get that far for some reason but the writeToFile function itself is being called. I call this function in a different function saveJson which is called when pressing submit on the form.

function saveJson() {
  var exampleArray = {
    exampleX: {
      'example1' : 'exampleValue1',
      'example2' : 'exampleValue2'
    }
  }

  console.log(exampleArray);
  writeToFile('jsonfile.json', exampleArray);
}

So I can't write to the file, but it also doesn't recognize my read function, although maybe that's because the file isn't being created in the first place.

Here is the reading function:

function readFromFile(filename, cb) {
  var pathToFile = cordova.file.externalDataDirectory + filename;
  window.resolveLocalFileSystemURL(pathToFile, function(fileEntry) {
    fileEntry.file(function(file) {
      var reader = new FileReader();

      reader.onloadend = function(e) /* E */ {
        //Success callback
        document.getElementById("testread").innerHTML = "Read successful";
      }

      reader.onerror = function(e) /* E */ {
        //Error callback
        document.getElementById("testread").innerHTML = "Read unsuccessful";
      }

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

Which is being called like this:

var shiftData;
readFromFile('shifts.json', function(data) {
  shiftData = data;
});

Again, it doesn't show the 'read successful' or 'read unsuccessful' on my page but this one might fix itself if the writing works, I'm not sure.

All tested on my actual Android device, Pixel 2 XL, not an emulator although that shouldn't make a difference.

Answer 1

I ended up using a different tutorial and changing that up a little.

In my app.js file (which is loaded at the top of my HTML page) I add this code:

var jsonFile;

document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
  window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dir) {
    dir.getFile('example.json', { create: true }, function(file) {
      jsonFile = file;
    });
  });
}

Which gives me a file to use in my other JS file (loaded at the bottom just before the end my body tag) using the jsonFile variable.

My writeToFile function looks like this now:

function writeToFile(data) {
  if (jsonFile == undefined) {
    alert("File is undefined")
  } else {
    var jsonData = JSON.stringify(data);
    jsonFile.createWriter(function(fileWriter) {

      fileWriter.seek(fileWriter.length);

      var blob = new Blob([jsonData], { type: 'text/plain' });
      fileWriter.write(blob);
      alert("writeToFile is successful!";)

    });
  }
}

• First we check if file is defined, it should be but just in case.

• Then we turn the data into valid JSON data.

• We create a fileWriter and use seek to append data to the end of the file.

• We create a blob to put the JSON on and write that blob to the file.