Ionic, ngCordova - Download and Display image from cacheDirectory

Question

I am trying to create a angular.factory to be able to download a image and display it to my Ionic App.

The problem is that i can't display download img from 'file.nativeURL' etc.

I am using ngCordova $cordovaFile, $cordovaFileTransfer plugins.

Here is my factory code:

    app.factory('ImgDownload', function ($q, $cordovaFile, $cordovaFileTransfer) {

      function download_img(url, filePath, options, AllowAllHost){
          var q = $q.defer();
          $cordovaFileTransfer.download(url, filePath, options, AllowAllHost)
            .then(function(res) {
              q.resolve(res)
            }, function (err) {
              q.reject(err);
          });
          return q.promise
      }
      return {
           CheckFileSystemThenDownloadImg: function(url, file, StorageDirectory, directory) {
               var filePath = StorageDirectory + directory + '/' + file;
               var q = $q.defer();
               $cordovaFile.checkDir(StorageDirectory, directory).then(function () {
                    $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
                       q.resolve(res)
                    }, function() {
                        var options = {create : true, exclusive: false};
                        download_img(url, filePath, options, true).then(function (res) {
                           q.resolve(res);
                        }, function (err) {
                            q.reject(err)
                        })
                    })
               }, function() {
                   var options = {create : true, exclusive: false};
                   $cordovaFile.createDir(StorageDirectory, directory, true).then(function () {
                       download_img(url, filePath, options,true).then(function (res) {
                           q.resolve(res)
                           console.log(res)
                       }, function (err) {
                           console.log(err)
                           q.reject()
                       })
                   })
               });
               return q.promise
           },
           getLocalImg: function(StorageDirectory, file, directory) {
               var q = $q.defer();
               $cordovaFile.checkDir(StorageDirectory, directory).then(function () {
                   $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
                       q.resolve(res)
                   }, function (err) {
                       q.reject(err)
                   })
               }, function (err) {
                   q.reject(err)
               });
               return q.promise
           }
      }
    });

My Controller:

    app.controller('MainCtrl', function($scope, $ionicPlatform, ImgDownload){

      $scope.img_remote = 'http://yourwatch.gr/wp-content/uploads/CMC808071.jpg'
      $ionicPlatform.ready(function() {
        var url = 'http://yourwatch.gr/wp-content/uploads/CMC808071.jpg';
        var file = 'CMC808071.jpg';
        var StorageDirectory = cordova.file.cacheDirectory;
        var directory = 'Images';
        ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
          .then(function(res){
            console.log("CheckFileSystem..:" + angular.toJson(res))
          }, function(err){
            console.log(angular.toJson(err))
          })
        ImgDownload.getLocalImg(StorageDirectory, file, directory)
          .then(function(res){
            console.log("getLocalImg:" + angular.toJson(res))
            $scope.local_img_src = res
          },
          function(err){
            console.log(angular.toJson(err))
          })
      });
    });

My view:

<img ng-src="{{ local_img_src.nativeURL }}" alt="" />

My meta Content-Security-Policy:

<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile://* content://* file:///*; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; media-src *">

I can't figure out why {{ local_img_src.nativeURL }} is not showing. I am developing over Mac and for IOS app.

Answer 1

It looks like you're calling getLocalImg before CheckFileSystemThenDownloadImg finishes. Try moving the getLocalImg to be next to console.log("CheckFileSystem..:" + angular.toJson(res)) like so:

ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
.then(function(res){
  console.log("CheckFileSystem..:" + angular.toJson(res));
  ImgDownload.getLocalImg(StorageDirectory, file, directory)
    .then(function(res){
      console.log("getLocalImg:" + angular.toJson(res))
      $scope.local_img_src = res
    },
    function(err){
      console.log(angular.toJson(err))
    });
  }, function(err){
    console.log(angular.toJson(err))
});