CODEWITHSUNDEEP
cordova
Mark Wiltshire
Mark Wiltshire

Reputation: 61

PhoneGap 3.0 FileReader not working

Help please, I am testing a simple write / read file example using phoneGap 3.0.0 (testing on IOS)

The write works and I can see the data correctly written in the file on my filesystem, but for some reason the read, despite always returning onloadend always returns a NULL result ?

Any ideas what I am doing wrong ?

Here is the code.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
    <title>Open File</title>
    <script type="text/javascript" src="js/xui-2.3.2.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" >

    var fileObject;

    document.addEventListener("deviceready", onDeviceReady, true);

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

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

    function gotFileEntry(fileEntry) {
        fileObject = fileEntry;

        x$('#saveFile_btn').on('click', function() {
            saveFileContent();
        });
    }

    function gotFileWriter(writer) {
        var myText = document.getElementById('my_text').value;
        /* prepare write listeners */
        writer.onwriteend = function(evt) {
            console.log("DONE Writing text");
            x$('#message').html('<p>File contents have been written.<br /><strong>File path:</strong> ' + fileObject.fullPath + '</p>');

            var reader = new FileReader();
            /* prepare read listeners */
            reader.onloadstart = function(evt) {
                console.log("started reading");
            };
            reader.onabort = function(evt) {
                console.log("aborted read text");
                console.log(evt.target.result);
                x$('#contents').html('<strong>Aborted</strong> <br />');
            };
            reader.onerror = function(evt) {
                console.log("Error read text");
                console.log("Error"+evt.error.code);
                x$('#contents').html('<strong>Error:</strong> <br />' + evt.error.code);
            };
            reader.onloadend = function(evt) {
                console.log("successfully read text");
                console.log("Target Result ["+evt.target.result+"]");
                console.log("Reader Result ["+reader.result+"]");
                x$('#contents').html('<strong>File contents:</strong> <br />' + evt.target.result);
            };

            console.log("Reading text");
            reader.readAsText(fileObject);
        };
        console.log("Writing text ["+myText+"]");
        writer.write(myText);

    }

    function saveFileContent() {
        fileObject.createWriter(gotFileWriter, fail);
    }

    function fail(error) {
        alert(error.code);
    }
    </script>
</head>
<body>

    <input type="text" id="my_text" />
    <input type="button" id="saveFile_btn" value="Save" />

    <div id="message"></div>
    <div id="contents"></div>

</body>
</html>

Here is the console output.

2013-08-22 13:55:22.215 Chapter2[33715:c07]  Writing text [sdsd]
2013-08-22 13:55:22.219 Chapter2[33715:c07]  DONE Writing text
2013-08-22 13:55:22.219 Chapter2[33715:c07]  Reading text
2013-08-22 13:55:22.220 Chapter2[33715:c07]  started reading
2013-08-22 13:55:22.221 Chapter2[33715:c07]  successfully read text
2013-08-22 13:55:22.222 Chapter2[33715:c07]  Target Result []
2013-08-22 13:55:22.222 Chapter2[33715:c07]  Reader Result []

Upvotes: 3

Views: 3740

Answers (1)

Mark Wiltshire
Mark Wiltshire

Reputation: 61

Thanks to Raymond Camden for helping fix this with me. Change to File API in phonegap 3.0.0

Here is working version

the object passed to readFile is a FileEntry object. In order to work with the actual file of a FileEntry, you use the file method

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
    <title>Open File</title>
    <script type="text/javascript" src="js/xui-2.3.2.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" >

    var fileObject;

    document.addEventListener("deviceready", onDeviceReady, true);

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

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

    function gotFileEntry(fileEntry) {
        fileObject = fileEntry;

        x$('#saveFile_btn').on('click', function() {
            saveFileContent();
        });
    }

    function gotFileWriter(writer) {
        var myText = document.getElementById('my_text').value;
        /* prepare write listeners */
        writer.onwriteend = function(evt) {
            console.log("DONE Writing text");
            x$('#message').html('<p>File contents have been written.<br /><strong>File path:</strong> ' + fileObject.fullPath + '</p>');

            fileObject.file(function(e) {

                console.log("called the file func on the file ob");

                var reader = new FileReader();
                /* prepare read listeners */
                reader.onloadstart = function(evt) {
                    console.log("started reading");
                };
                reader.onabort = function(evt) {
                    console.log("aborted read text");
                    console.log(evt.target.result);
                    x$('#contents').html('<strong>Aborted</strong> <br />');
                };
                reader.onerror = function(evt) {
                    console.log("Error read text");
                    console.log("Error"+evt.error.code);
                    x$('#contents').html('<strong>Error:</strong> <br />' + evt.error.code);
                };
                reader.onloadend = function(evt) {
                    console.log("successfully read text");
                    console.log("Target Result ["+evt.target.result+"]");
                    console.log("Reader Result ["+reader.result+"]");
                    x$('#contents').html('<strong>File contents:</strong> <br />' + evt.target.result);
                };

                console.log("Reading text");
                reader.readAsText(e);
            });
        };
        console.log("Writing text ["+myText+"]");
        writer.write(myText);

    }

    function saveFileContent() {
        fileObject.createWriter(gotFileWriter, fail);
    }

    function fail(error) {
        alert(error.code);
    }
    </script>
</head>
<body>

    <input type="text" id="my_text" />
    <input type="button" id="saveFile_btn" value="Save" />

    <div id="message"></div>
    <div id="contents"></div>

</body>
</html>

Upvotes: 2

Related Questions