filesaver.js not working with cordova apps

Question

I have a web app using filesaver.js to create some files that will be downloaded later to a user's computer. I transfered the same scripts files I am using for this web app in my cordova application. Everything is working perfect except the download button I have in my app. It won't fire anything. Is there any cordova plugin to use to get access to the file system of the device or something else I can do?

Here is some markup: html

 <link rel="stylesheet" type="text/css" href="css/sliders.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/transformations.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"/></script>
<script type="text/javascript" src="js/save.js"></script>
<script src="js/bootbox.js" type="text/javascript"></script>
<script type="text/javascript" src="js/transformations.js"></script>


 <div class="btn btn-block btn-success" onclick="savefile('hello.txt','maamaamamamam\nu')">Download code</div>

Js

 $(document).ready(function(){
      //some functions
  });
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(cordova.file);
}

var myFileUrl = "kk";
function saveFile (fileName, fileData) {
    // Get access to the file system
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
        // Create the file.
        fileSystem.root.getFile(fileName, { create: true, exclusive: false }, function (entry) {
            // After you save the file, you can access it with this URL
            myFileUrl = entry.toURL();
            entry.createWriter(function (writer) {
               writer.onwriteend = function (evt) {
                    alert("Successfully saved file to " + myFileUrl);
                };
                // Write to the file
                writer.write(fileData);
            }, function (error) {
                alert("Error: Could not create file writer, " + error.code);
            });
        }, function (error) {
            alert("Error: Could not create file, " + error.code);
        });
    }, function (evt) {
        alert("Error: Could not access file system, " + evt.target.error.code);
    });
}

The problem is that by using this code i get no errors but also nothing happens.Any help would be appreciated

Answer 1

Working with files in a webview on a mobile device is quite a bit different than doing it in a browser, and the author of filesaver.js even addresses that in his docs where he points out the issue with iOS. One cross-platform solution for saving the file would be to use Cordova's File plugin (https://github.com/apache/cordova-plugin-file), then you can do something like this:

In your markup:

<a href="#" onclick="saveFile('myFile.txt', 'Some text to write into file');">Save file</a>

In your Javascript:

var myFileUrl = "";
function saveFile (fileName, fileData) {
    // Get access to the file system
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
        // Create the file.
        fileSystem.root.getFile(fileName, { create: true, exclusive: false }, function (entry) {
            // After you save the file, you can access it with this URL
            myFileUrl = entry.toURL();
            entry.createWriter(function (writer) {
               writer.onwriteend = function (evt) {
                    alert("Successfully saved file to " + myFileUrl);
                };
                // Write to the file
                writer.write(fileData);
            }, function (error) {
                alert("Error: Could not create file writer, " + error.code);
            });
        }, function (error) {
            alert("Error: Could not create file, " + error.code);
        });
    }, function (evt) {
        alert("Error: Could not access file system, " + evt.target.error.code);
    });
}

Here is a complete working example using @cssGEEK's code from the question and stripped down to the bare essentials. The only external file that's included is cordova.js, which is automatically included in the Cordova project.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <input type="button" value="Download code" onclick="saveFile('hello.txt', 'maamaamamamam\nu');">
    <script src="cordova.js"></script>
    <script>
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            alert("Got deviceready");
        }

        var myFileUrl = "kk";
        function saveFile (fileName, fileData) {
            // Get access to the file system
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
                // Create the file.
                fileSystem.root.getFile(fileName, { create: true, exclusive: false }, function (entry) {
                    // After you save the file, you can access it with this URL
                    myFileUrl = entry.toURL();
                    entry.createWriter(function (writer) {
                       writer.onwriteend = function (evt) {
                            alert("Successfully saved file to " + myFileUrl);
                        };
                        // Write to the file
                        writer.write(fileData);
                    }, function (error) {
                        alert("Error: Could not create file writer, " + error.code);
                    });
                }, function (error) {
                    alert("Error: Could not create file, " + error.code);
                });
            }, function (evt) {
                alert("Error: Could not access file system, " + evt.target.error.code);
            });
        }
    </script>
</body>
</html>

You can test this as follows. Open a command prompt in the directory where you keep your source code and:

1. Create a Cordova project and move into the project directory. At the command prompt, type:

   cordova create hello com.example.hello HelloWorld

   cd hello

2. In the www directory inside the project directory, replace the entire contents of the www/index.html file with the above code.

3. In the project directory, at the command prompt, type cordova plugin add org.apache.cordova.file to add the File plugin.

4. In the project directory, at the command prompt, type cordova run android to build and deploy the app to the emulator or your device.

5. In the emulator or on the device, wait until you see the Got deviceready alert and dismiss it; the File plugin is now available.

6. In the emulator or on the device, click the Download code button.

You should see: