Afficher la barre de progression du téléchargement ionique

Je développe une application ionique. J'utilise le plugin FileTransfer de cordova pour télécharger le fichier pdf. Je suis en mesure de télécharger le fichier dans ma mémoire interne, mais pas en mesure d'afficher une seule barre de progression pour downloaidng. Quelle est la meilleure façon d'afficher les progrès pour le téléchargement.Afficher la barre de progression du téléchargement ionique

Contrôleur

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); 
    });

Source

2016-05-12 Muhsin

J'ai utilisé cordovaToast plug-in pour cette feature.Here est l'exemple pour montrer la progression du téléchargement de pdf

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; 
}

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); 
     }); 
}

Source

2016-11-10 09:10:46 Muhsin