I'm trying to work with files on IOS, using Phonegap[cordova 1.7.0]. I read how to access files and read them on the API Documentation of phone gap. But I don't know, when the file is read where will it be written ? & How can I output the text, image, or whatever the text is containing on the iPhone screen?

Here's the code I'm using:

    function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

function gotFS(fileSystem) {
    fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.file(gotFile, fail);
}

function gotFile(file){
    readDataUrl(file);
    readAsText(file);
}

function readDataUrl(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("Read as data URL");
        console.log(evt.target.result);
    };
    reader.readAsDataURL(file);
}

function readAsText(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("Read as text");
        console.log(evt.target.result);
    };
    reader.readAsText(file);
}

function fail(evt) {
    console.log(evt.target.error.code);
}

I'm trying to work with files on IOS, using Phonegap[cordova 1.7.0]. I read how to access files and read them on the API Documentation of phone gap. But I don't know, when the file is read where will it be written ? & How can I output the text, image, or whatever the text is containing on the iPhone screen?

Here's the code I'm using:

    function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

function gotFS(fileSystem) {
    fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.file(gotFile, fail);
}

function gotFile(file){
    readDataUrl(file);
    readAsText(file);
}

function readDataUrl(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("Read as data URL");
        console.log(evt.target.result);
    };
    reader.readAsDataURL(file);
}

function readAsText(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("Read as text");
        console.log(evt.target.result);
    };
    reader.readAsText(file);
}

function fail(evt) {
    console.log(evt.target.error.code);
}

• javascript
• iphone
• ios5
• cordova

3 Answers 3

As of Cordova 3.5 (at least), FileReader objects only accept File objects, not FileEntry objects (I'm not sure about prior releases).

Here's an example that will output the contents a local file readme.txt to the console. The difference here from Sana's example is the call to FileEntry.file(...). This will provide the File object needed for the call to the FileReader.readAs functions.

function readFile() {
    window.requestFileSystem(window.LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile('readme.txt', 
            {create: false, exclusive: false}, function(fileEntry) {
                fileEntry.file(function(file) {
                    var reader = new window.FileReader();
                    reader.onloadend = function(evt) {console.log(evt.target.result);};
                    reader.onerror = function(evt) {console.log(evt.target.result);};
                    reader.readAsText(file);
                }, function(e){console.log(e);});
            }, function(e){console.log(e);});
    }, function(e) {console.log(e);});
}

That's what worked for me in case anyone needs it:

function ReadFile() {
  var onSuccess = function (fileEntry) {
    var reader = new FileReader();
    reader.onloadend = function (evt) {
      console.log("read success");
      console.log(evt.target.result);
      document.getElementById('file_status').innerHTML = evt.target.result;
    };
    reader.onerror = function (evt) {
      console.log("read error");
      console.log(evt.target.result);
      document.getElementById('file_status').innerHTML = "read error: " + evt.target.error;
    };

    reader.readAsText(fileEntry); // Use reader.readAsURL to read it as a link not text.
  };

  console.log("Start getting entry");
  getEntry(true, onSuccess, { create: false });
};

If you are using phonegap(Cordova) 1.7.0, following page will work in iOS, replace following template in index.html

<!DOCTYPE html>
<html>
  <head>
    <title>FileWriter Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.createWriter(gotFileWriter, fail);
    }

    function gotFileWriter(writer) {
        writer.onwriteend = function(evt) {
            console.log("contents of file now 'some sample text'");
            writer.truncate(11);  
            writer.onwriteend = function(evt) {
                console.log("contents of file now 'some sample'");
                writer.seek(4);
                writer.write(" different text");
                writer.onwriteend = function(evt){
                    console.log("contents of file now 'some different text'");
                }
            };
        };
        writer.write("some sample text");
    }
    function fail(error) {
        console.log(error.code);
    }
    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Write File</p>
  </body>
</html>