Cordova Meteor app not allowed to load local resource

Question

I'm working on a Meteor Cordova app which needs to work offline.

I'm using ground:db to cache my data offline, which works fine, except for images. I have an image collection using collectionFS. Since these images need to be available when offline, I developed some kind of local sync which observes the image collection, and when some image gets added or changed, downloads the image to the local storage using cordova filesystem and filetransfer. I keep track of the downloaded images in a client-side collection.

When using an image in the a template, I check if the image exists locally. If so, I pass the local filepath to the template, else I pass the url.

(android:http://meteor.local/:0) Not allowed to load local resource: file:///storage/emulated/0/brachot/AbsoluteBlackGepolijst.jpg

Is there some kind of problem for a Meteor mobile app to access the local filesystem?

Here is some of my relevant code:

Images.find().observe({
    added: function(doc){
      console.log('added: ' + doc.original.name);
      var localImage = LocalImages.findOne(doc._id);
      if (!localImage && window.fileSystem && window.fileSystem.root){
    // create filepath for new file
    var dir = window.fileSystem.root.getDirectory("brachot", {create: true, exclusive: false}, function(dirEntry){
      var file = dirEntry.getFile(doc.original.name, {create: true, exclusive: false}, function(fileEntry){
        var filePath = fileEntry.toURL();

        // download the file to the filepath
        var fileTransfer = new FileTransfer();
        console.log('starting file download: ' + doc.url() + ' to ' + filePath);
        fileTransfer.download(
          doc.url(),
          filePath,
          function(){
            // download image and save locally
            LocalImages.insert({
              _id: doc._id,
              name: doc.original.name,
              url: filePath
          });
            console.log('save');
        },
        function(error){
            console.log('failed to save image: ' + filePath + ' (error: ' + error.http_status + ')');
        }
        );
    });
  }, function(error){
      console.log(JSON.stringify(error));
});

Template.materials.helpers({  
    imageUrl: function(){
        var image = LocalImages.findOne({name: this.image});
        if (!image) {
            image = Images.findOne({'original.name': this.image});
            return image.url();
        }
        else {
            return image.url;
        }
    }
});

Answer 1

Try adding,

App.accessRule("http://meteor.local/*");

to mobile-config.js in the root of your app

Ref: http://docs.meteor.com/#/full/App-accessRule