Downloading Files and Showing Progress using Intel XDK

This post is a part 29 of Intel XDK Complete Tutorial post series.

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

<!DOCTYPE html>
<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>