Display progress bar using jquery in phonegap android for multiple files upload / download

1.9k views Asked by At

I am creating an app in which i want to show the progress bar for multiple file downloads and upload from the server. I tried the example of Raymondcamden for displaying the progress of the file. I tried to use the same for multiple files but its progress bar varies while downloading the file here is the code that i tried for multiple files:

function startDl() {
console.log('in startD1 function');

var progressbar = $("#progressbar"),progress_Label = $(".progress-label");
    progressLabel = document.getElementById('progress-label');

progressLabel.style.visibility = "";
progressLabel.style.display = "block";

var download_url = ["http://archive.org/download/Kansas_Joe_Memphis_Minnie-When_Levee_Breaks/Kansas_Joe_and_Memphis_Minnie-When_the_Levee_Breaks.mp3",
                    "http://archive.org/download/Kansas_Joe_Memphis_Minnie-When_Levee_Breaks/Kansas_Joe_and_Memphis_Minnie-When_the_Levee_Breaks.mp3",
                    "http://archive.org/download/Kansas_Joe_Memphis_Minnie-When_Levee_Breaks/Kansas_Joe_and_Memphis_Minnie-When_the_Levee_Breaks.mp3" ]
var ft = new FileTransfer();
for(var i=0;i<download_url.length;i++)
{   
    var uri = encodeURI(download_url[i]);

    var downloadPath = fileSystem.root.fullPath + "/download.mp3";  
    ft.download(uri, downloadPath, function(entry) {
        progressbar.progressbar({
            disabled: true
        });
        var media = new Media(entry.fullPath, null, function(e) {
            console.log('error in download')
            alert(JSON.stringify(e));
        });
        media.play();
    }, function(error) {
        alert('Crap something went wrong...');
    });
}
ft.onprogress = function(progressEvent) {
    if (progressEvent.lengthComputable) 
    {
        var perc =    Math.round( (progressEvent.loaded / progressEvent.total) * 100 );

        progressbar.progressbar({
            value : perc,
            change : function() {
                progress_Label.text(progressbar.progressbar("value") + "%");
            },
            complete : function() {
                progress_Label.text("complete!");
            }
        });
    }
};
}

Any help is appreciated. Thanks in advance

0

There are 0 answers