In this tutorial I will show you how to download files using Intel XDK and also show the download progress.
To achieve this functionality we don’t need to use any plugin or JavaScript library. We can get this functionality using XMLHttpRequest 2 Object.
Here is the code for an sample app which downloads a image and shows the progress of the download
<html>
<head>
<title>Download and Showing Progress using Intel XDK</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<progress value="0" min="0" max="100" id="progress"></progress>
<div id="size"></div>
<div id="downloaded"></div>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false);
xhr.open("GET", "http://upload.wikimedia.org/wikipedia/commons/3/3a/White_Tiger_6_(3865790598).jpg");
function updateProgress(oEvent)
{
if (oEvent.lengthComputable)
{
var percentComplete = (oEvent.loaded / oEvent.total) * 100;
document.getElementById("progress").setAttribute("value", percentComplete);//just a random value
document.getElementById("size").innerHTML = oEvent.total;
document.getElementById("downloaded").innerHTML = oEvent.loaded;
}
else
{
document.getElementById("progress").setAttribute("value", 30);//just a random value
document.getElementById("size").innerHTML = "unknown";
document.getElementById("downloaded").innerHTML = "unknown";
}
}
function transferComplete(oEvent)
{
alert("Downloaded Successfully");
}
function transferFailed(oEvent)
{
alert("Downloading Failed");
}
function transferCanceled(oEvent)
{
alert("Downloading Cancelled");
}
xhr.send();
</script>
</body>
</html>
To store the downloaded file in application storage refer my article on Intel XDK File System API