Ionic Cordova AngularJS - Can't access file:// in iframe

2
votes

I've been going insane trying to figure out why I can't access the contents of a file on the ios6 emulator that I'm trying to link as the ng-src in my iframe.

I am currently using the ngCordova $cordovaFileTransfer, $cordovaFile, & $cordovaZip plugins to download an external resource, unzip it to a location on the filesystem, and then update the src of an iframe to reflect the new content.

I'm not sure if I'm missing some fundamental pieces of knowledge when working with the filesystem of an emulator, but I have completely hit a wall. Here is the code for my view:

    <ion-view view-title="{{course.title}}" class="single-course">

  <ion-content>
    ...
    <iframe id="course-iframe" width="100%" height="100%" ng-src="{{courseData | trustAsResourceUrl}}"/></iframe>
    ...
  </ion-content>
</ion-view>

And here is the relevant piece of my controller:

function SingleCourseCtrl($scope, $stateParams, $cordovaZip, $timeout, $ionicPlatform, $cordovaFile, $cordovaFileTransfer, ModalService, Courses) {


    // Initialize some variables on start
    $scope.downloading = false;
    $scope.fileURL = '';
    $scope.progress = 0;
    $scope.courseData = '';

    $scope.download = function() {
    $scope.downloading = true;

    // Make sure the device is ready in order to start
    document.addEventListener('deviceready', function () {

      var url = "[link-to-download-file]";

      // Check to see if the file exists in "Documents"
      var courseDir = "courses/course-" + $scope.course.id;
      $cordovaFile.checkFile(cordova.file.documentsDirectory, courseDir);

      // Check to see if courses directory exists
      // If not, create "courses" directory in "Library"
      $cordovaFile.checkDir(cordova.file.dataDirectory, courseDir).
        then(function(success) {
        }, function(error) {
          $cordovaFile.createDir(cordova.file.dataDirectory, courseDir, false)
            .then(function(success) {
              console.log(JSON.stringify(success));
            });
        });

      // Create the target filename, based on course id
      var targetPath = cordova.file.documentsDirectory + '/' +courseDir + ".zip",
          trustHosts = true,
          options    = {};

      // Download the file to the device
      $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
        .then(function(result) {

          $scope.downloading = false;

          // Once downloaded, unzip the contents of the zip to the appropriate directory
          $cordovaZip
            .unzip(
              targetPath,
              cordova.file.dataDirectory + courseDir
            ).then(function () {

              // Set the index file of the course
              $scope.courseData = cordova.file.dataDirectory + courseDir + '/a001index.html';


            });
        }, function(err) {
          // Error
        }, function (progress) {
          // Show loading bar
          $scope.progress = Math.round((progress.loaded / progress.total) * 100);
          $scope.courseLoaded = progress.loaded;
          $scope.courseTotal = progress.total;
        });


      }, false);
    };
  }

Can anyone shed some light as to why I can't access the file from the local device? When I console.log the file path, I get something like this:

file://Users/Stevie/Library/Developer/CoreSimulator/Devices/70EA2E87-A715-4252-B5B8-A5C03E090BD9/data/Containers/Data/Application/108F6AE2-3A24-4F86-AF19-1DC50E85AEF2/Library/NoCloud/courses/course-0/a001index.html

Even if I try to link to the file directly, the iframe is just blank and I get no error in the console.

I really appreciate any help you guys can give me. Thankyou!

1
iosangularjscordovaioniccordova-plugins

1 Answers