QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Downloading Files and Showing Progress using Intel XDK

Downloading Files and Showing Progress using Intel XDK

intelxdk-download

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>

Screen Shot 2014-11-29 at 5.11.27 pm

To store the downloaded file in application storage refer my article on Intel XDK File System API

Nov 29, 2014Narayan Prusty
Find Out When Your Email Has Been ReadSpypig Alternative
Comments: 4
  1. Guesa
    4 years ago

    so where is the image? i cant find the downloaded image.

    ReplyCancel
  2. king
    5 years ago

    hi
    how save file in storage ?

    ReplyCancel
  3. Akito
    5 years ago

    hi if the file is a jpg how i save the file on the www folder??

    ReplyCancel
  4. Guest
    6 years ago

    …

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 4 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Create a Camera App using Intel XDK
  • Accessing User Phone Contacts using Intel XDK
  • Create a Feed Reader App using Intel XDK
  • Create a Password Manager App using Intel XDK
  • Encrypting Local Data In Intel XDK
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license