CODEWITHSUNDEEP
javascriptmeteorblobgridfs
Mikkel
Mikkel

Reputation: 7777

Meteor android app not showing images

I am using the excellent file-collection package,

https://atmospherejs.com/vsivsi/file-collection

to store images in my Mongo database. Running the app on Android doesn't show the images (they appear as broken images). In the browser it is perfect.

I don't think the problem is unique to this package, as it is using Mongo's gridfs to store the images, and provides URL's to access them.

Here is a note from Vaughn in the documentation:

Cordova Android Bug with Meteor 1.2+

Due to a bug in the Cordova Android version that is used with Meteor 1.2, you will need to add the following to your mobile-config.js or you will have problems with this package on Android devices:

App.accessRule("blob:*");

Which I have done, but without success.

I also see the documentation references setting headers to deal with CORS issues, like this:

myFiles = new FileCollection('myFiles',
  { resumable: true,    // Enable built-in resumable.js chunked upload support
    http: [             // Define HTTP route
      { method: 'get',  // Enable a GET endpoint
        path: '/:md5',  // this will be at route "/gridfs/myFiles/:md5"
        lookup: function (params, query) {  // uses express style url params
          return { md5: params.md5 };       // a query mapping url to myFiles
        },
        handler: function (req, res, next) {
           if (req.headers && req.headers.origin) {
             res.setHeader('Access-Control-Allow-Origin', 'http://meteor.local'); // For Cordova
             res.setHeader('Access-Control-Allow-Credentials', true);
           }
           next();
        }
      },

But again without success.

Looking at the network tab on the inspector, I can't even see requests for the images from the server, which suggests that it is being denied by something in the Cordova code, and it's not even trying to go out and get the images.

I have reproduced the problem using Vaughn's demo app, which I have forked and added the android platform, so it's ready to go if you care to try and help.

https://github.com/mikkelking/meteor-file-sample-app

If you do a meteor run android-device it should run on the Android. You will need to register and then upload an image to see the problem. From a browser it works fine.

Any help would be appreciated, this is a show stopper for my project. One option I have considered is to move the images to an S3 bucket, which I think should work, but I'd like to keep the images in the db if I can.

Upvotes: 3

Views: 414

Answers (1)

pope12
pope12

Reputation: 86

I had a similar issue once with gridfs. I believe that the issue comes because the image source is a relative source. So your image sources are coming from localhost. It works on the web version because the browser is on the same machine as your server, so a localhost source works fine. But on the android device it won't work because the images are not served on that device.

When I had this problem I just deployed to production and it worked on mobile devices because the image source pointed to a url that was on the internet and not relative to the device. This works for production but not for dev testing.

When I saw this question I cloned your code and got it working on an android device for local dev.

The first step I did is to set the ROOT_URL env variable and mobile server to point to the your local server. When you run meteor locally you can run a command like this to set these variables, using your computer's local ip address

export ROOT_URL=http://192.168.1.255:3000 && meteor run android-device --mobile-server=http://192.168.1.255:3000

Next, in your sample.coffee Template.collTest.helpers link function, you need to use the absolute url instead of a relative one (so that on your mobile device it will look to your local server instead of localhost). To dynamically get this so that it works on different servers, you can use something like this

Meteor.absoluteUrl(myData.baseURL + "/md5/" + this.md5)

Then I had to add the computer's ip address http://192.168.1.255:3000 to the content security policies in the sample.jade file.

I almost forgot, at this point I was getting a 403 forbidden error. I changed the myData.allow read function in sample.coffee and just returned true and the 403 was gone, something was happening with the permissions there

After that the image showed up on my android device.

Upvotes: 1

Related Questions