Download progress bar pops and ends up, with no errors and no output file in the device

Question

I am creating a image download server for my APP with Rest API, there are two buttons in the HTML, one is download button and other is load button. When clicked on download button progress bar shows the progress, but there is no output file and doesn't show any error even load button doesn't load anything.

This script works fine with static URL (without API) by making certain changes in the script.

Link for my temporary Server. http://freaksearch.com/aarti/rest-api.php?json=image&Id=

Plugin required by this script : cordova-plugin-file-transfer (this is not depreciated plugin) Link for the plugin: https://www.npmjs.com/package/cordova-plugin-file-transfer

Here is my HTML:

<div class="padding">
    <button class="button" ng-click="download()">Download</button>
    <button class="button" ng-click="load()">Load</button>
    {{imgFile}}
    <img ng-src="{{imgFile}}">
</div>

Here is my script:

$scope.download = function(imageId, imageName) {
    $ionicLoading.show({
      template: 'Downloading...'
    });
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
          fs.root.getDirectory(
              "MyProject",
              {
                create: true
              },
              function (dirEntry) {
                dirEntry.getFile(
                    imageName + ".jpg",
                    {
                      create: true,
                      exclusive: false
                    },
                    function gotFileEntry(fe) {
                      var p = fe.toURL();
                      fe.remove();
                      ft = new FileTransfer();
                      ft.download(
                          encodeURI('http://freaksearch.com/aarti/rest-api?json=image' + imageId),
                          p,
                          function (entry) {
                            $ionicLoading.hide();
                            $scope.imgFile = entry.toURL();
                          },
                          function (error) {
                            $ionicLoading.hide();
                            alert("Download Error Source --> " + error.source);
                          },
                          false,
                          null
                      );
                    },
                    function () {
                      $ionicLoading.hide();
                      console.log("Get the file failed");
                    }
                );
              }
          );
        },
        function () {
          $ionicLoading.hide();
          console.log("Request for filesystem failed");
        });
  }
  $scope.load = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
        fs.root.getDirectory(
            "MyProject",
            {
                create: false
            },
            function(dirEntry) {
                dirEntry.getFile(
                    imageName + ".jpg",
                    {
                        create: false,
                        exclusive: false
                    },
                    function gotFileEntry(fe) {
                        $ionicLoading.hide();
                        $scope.imgFile = fe.toURL();
                    },
                    function(error) {
                        $ionicLoading.hide();
                        console.log("Error getting file");
                    }
                );
            }
        );
    },
    function() {
        $ionicLoading.hide();
        console.log("Error requesting filesystem");
    });
}

Answer 1

Adding <preference name="AndroidPersistentFileLocation" value="Compatibility" /> to the config.xml made my folder & file visible. I hope this could help someone.

Now i can see the images, but all the images are Corrupt .