File Transfer example

The index.html file containing JavaScript that makes use of the File Transfer API functionality is listed below.

<!DOCTYPE html>
<html manifest="manifest.appcache">
  <head>
    <title>FileTransfer API usage example</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
    <script type="text/javascript">
    
    function printText(str) {
      var d = document.getElementById('text-box');
      d.appendChild(document.createTextNode(str));
      d.appendChild(document.createElement('br'));
      d.scrollTop = d.scrollHeight;
    }
    
    function getFile(file) {
      var callback = {
        onSuccess: function (entry) {
          printText("onSuccess " + JSON.stringify(entry));
        },
        onProgress: function (progress) {
          printText("onProgress " + progress);
        },
        onCancel: function () {
          printText("onCancel");
        },
        onFailure: function (data) {
          printText("onFailure " + JSON.stringify(data));
      }};
      var options = undefined;
      requestFileSystem(window.PERSISTENT, 1 * 1024 * 1024 /*1MB*/, function (fs) {
        fs.root.getFile(file, {create: true}, function (entry) {
          lastTask = launchbox.FileTransfer.download("http://websitetips.com/articles/copy/lorem/"+file, entry.toURL(), options, callback);
        }, function (err) {
        printText("getFile error: " + JSON.stringify(err));
        });
      }, function (err) {
        printText("requestFileSystem error: " + JSON.stringify(err));
      });
    }

    function readFile(file){ //This function is not connected with File Transfer Api. For more information about methods used here look at the Filesystem API
      var errorHandler = function(err) {
        printText(err);
      }
      requestFileSystem(
        window.PERSISTENT, 
        10*1024*1024 /*10MB*/, 
        function(fs) {
          fs.root.getFile(file, {}, function(entry) {
            entry.file(function(fd) {
              var reader = new FileReader();
              reader.onload = function(event) {
                printText("Read: " + reader.result);
              };
              reader.onerror = function(event) {
                printText("Error occured.");
              };
              reader.readAsText(fd);
            }, errorHandler);
          }, errorHandler);
        }, 
        errorHandler
      );
    }
    
    function clearOutput(){
      var d = document.getElementById('text-box');     
      d.innerHTML = "";
    }
  </script>
  </head>

  <body>
    <header>
      <h3><span>FileTransfer API usage example</span>
      </h3>
    </header>
    
    <input type="button" onclick="getFile('ipsum.txt');" value="Download sample lorem ipsum txt file" /><br/>
    <input type="button" onclick="readFile('ipsum.txt');" value="Read a file"/><br/>
    <input type="button" onclick="getFile('error.asd');" value="Try to download non existing file" /><br/>
    <input type="button" onclick="clearOutput();" value="Clear output" />
    <div id="text-box"></div>
  </body>
</html>

The contents of the cache manifest file called manifest.appcache for this application are listed below:

CACHE MANIFEST

CACHE:
index.html

NETWORK:
*

File Transfer

File Transfer example

Related topics