CODEWITHSUNDEEP
androidangularjscordovaionic-frameworkprogress-bar
Muhsin Keloth
Muhsin Keloth

Reputation: 7954

Show download progress bar ionic

I am developing an ionic app. I am using cordova's FileTransfer plugin to download pdf file. I am able to download the file to my internal memory,but not able to display single progress bar for downloaidng. What is the best way of displaying progress for downloading.

Controller

var url = 'http://someurl.com/api/pdf_download/' + id;
// Android
var targetPath = 'file:///storage/sdcard0/' + id + '.pdf';
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
    .then(function(result) {
        console.log(result);
    }, function() {
        var alertPopup = $ionicPopup.alert({
            title: 'No internet access',
            buttons: [{
                text: 'OK',
                type: 'button-assertive'
            }]
        });
        alertPopup.then(function() {});

    }, function(progress) {
        $timeout(function() {
            $scope.downloadProgress = (progress.loaded / progress.total) * 100;
        })
        console.log('progress--->', $scope.downloadProgress);
    });

Upvotes: 2

Views: 7786

Answers (2)

Muhsin Keloth
Muhsin Keloth

Reputation: 7954

I have used cordovaToast plugin for this feature.Here is the example for showing pdf download progress

html

<ion-view >
    <div class="bar bar-subheader bar-positive" style="padding:0px;height: 8px;" >
        <progress id="progressbar" max="100" value="{{ downloadProgress }}" class="progress"> </progress>
    </div>
    <ion-content>
    </ion-content>
</ion-view>

css

.progress {
    margin: 0 px;
    height: 8 px;
    background - color: #F1292B!important;
    border - radius: 2 px;
    box - shadow: 0 2 px 5 px rgba(0, 0, 0, 0.25) inset;
}

js

if (window.cordova) {
    var url = '{{base_url}}/pdf_download/' + id;
    // Android
    var targetPath = 'file:///storage/sdcard0/' + 'fpl_' + id + '.pdf';
    var trustHosts = true;
    var options = {};
    $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
        .then(function(result) {
            $cordovaToast
                .show('File downloaded successfully..', 'short', 'center')
                .then(function() {
                    // success
                }, function() {
                    // error
                });

            console.log(result);
        }, function() {
            var alertPopup = $ionicPopup.alert({
                title: 'No internet access',
                buttons: [{
                    text: 'OK',
                    type: 'button-assertive'
                }]
            });
            alertPopup.then(function() {});

        }, function(progress) {
            var dnldpgs = progress.loaded.toString().substring(0, 2);
            $scope.downloadProgress = parseInt(dnldpgs);
        });
}

Upvotes: 1

Sithys
Sithys

Reputation: 3793

As benka already answered to my question, you should use the <progress> html element.

The full answer can be found over here -> https://stackoverflow.com/a/25553044/3671726

Upvotes: 0

Related Questions