Downloading multiple text files to mobile device and showing transfer progress

Mick_R_ · ‎08-18-2015

I have been tasked with creating what on paper seems a simple mobile application. Because of the portability, we have chosen the Intel XDK as our development tool utilising HTML5/JQuery.

Basically, the mobile app will have three options:

1. Download data - stock, operators, accounts etc.

2. Process transactions - record items allocated to the end user and by whom.

3. Upload transactions - pass transaction details back to Back Office system.

I have made a start on the first of the options, Download data, where a number of text files need to be copied to the device, read in turn and finally, imported into a database for use within the second option.

I am attempting to use Cordova File-transfer and have included org.apache.cordova.file & org.apache.cordova.file-transfer plugins.

I have the code below which is triggered when the correct 'page' is shown:-

$( "#pgImport" ).on("pageshow", function(event) {
    importFiles();
});

which calls the following function :-

function importFiles() {
    var ft = new FileTransfer();
    ft.download(
        "http://10.10.10.6/downloads/operator.txt", // what u download
        "/sdcard/test.txt",// this is the filename as well complete url
        function(entry) {
            alert("success"); alert(JSON.stringify(entry));
        }, 
        function(err) {
            alert(err); alert(JSON.stringify(err));
        }
    );
    alert("Import Files");
}

However JSHints tells me that FileTransfer is not defined.

Other than icluding the plugins in the Hybrid Mobile App settings, and linking to cordova.js in my html file, do I need to to anything else?

All help greatly appreciated.

Rakshith_K_Intel · ‎08-18-2015

File Transfer will work on actual device, you can either build app and test or use App Preview using test tab or on USB connected device using debug tab.

Make sure you have checked the File, File Transfer and Device plugins under project settings -> plugins

You can use this test code to make sure deviceready is firing:

function onDeviceReady(){
    alert("deviceready")
}
document.addEventListener("deviceready", onDeviceReady, false);

All File Transfer initialization should be done after deviceready is fired.

Mick_R_ · ‎08-19-2015

I'm obviously doing something wrong because it's still not working.

I have added your test code to the bottom of my html file, and it is firing - alerting me that the device is ready before doing anything else in the app.

Here is the order of linked script files, (and your suggested test code), at the base of my <body> :-

    <script src="intelxdk.js"></script>         <!-- phantom library, needed for XDK api calls -->
    <script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls -->
    <script src="xhr.js"></script>              <!-- phantom library, needed for XDK CORS -->

    <script src="js/app.js"></script>           <!-- for your event code, see README and file comments for details -->
    <script src="js/init-app.js"></script>      <!-- for your init code, see README and file comments for details -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see file for details -->
    <script>
        function onDeviceReady(){
            alert("deviceready")
        }
        document.addEventListener("deviceready", onDeviceReady, false);       
    </script>

Is this order correct?

jquery and jquery mobile scripts are linked in <head>.

The code I have an issue with is in app.js but is not called until the required page is shown:-

function importFiles() {
    var ft = new FileTransfer();
    ft.download(
        "http://10.10.10.6/downloads/operator.txt", // what u download
        "/sdcard/test.txt",// this is the filename as well complete url
        function(entry) {
            alert("success"); alert(JSON.stringify(entry));
        }, 
        function(err) {
            alert(err); alert(JSON.stringify(err));
        }
    );
    alert("Import Files");
}
$( "#pgImport" ).on("pageshow", function(event) {
    importFiles();
});

Again, any help advice greatly appreciated.

Rakshith_K_Intel · ‎08-19-2015

here is test code I used to check:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <script src="cordova.js"></script>
    <script>


function onDeviceReady(){
    alert("deviceready")
}
document.addEventListener("deviceready", onDeviceReady, false);        
        
function fileDownload(){  
    try{
        var ft = new FileTransfer();    
        ft.download(
            "http://www.google.com/robots.txt", // what u download
            "/sdcard/test.txt",// this is the filename as well complete url
            function(entry) {
                alert("success"); alert(JSON.stringify(entry));

            }, 
            function(err) {
                alert(err); alert(JSON.stringify(err));
            }
        );
    }
    catch(err){alert(err.message)}
}


    </script>    
</head>

<body>
    <br>
    <br>
    <button onclick="fileDownload()">File Download</button>
</body>
</html>

http://10.10.10.6/downloads/operator.txt is not working so I used some other url