trouble with filepicker script loading in meteor

Question

I'm not having much luck so far in loading the filepicker package in my Meteor project.

What I did:

$cd ~/myMeteorProject
$mrt add filepicker
>>>Done installing smart packages
$head smart.json
>>>{
  "packages": {
  "router": {},
  "filepicker": {}
 }
}
$mrt
>>>Stand back while Meteorite does its thing

Done installing smart packages

Ok, everything's ready. Here comes Meteor!

[[[[[ ~/myMeteorProject ]]]]]

=> Meteor server running on: http://localhost:3000/

So at this point all looks like I'd expect. ( I even double checked the contents of the filepicker package and it contains all of what i'd expect, the source to load has the same URL as is found on the filepicker.io site, etc.)

However, when I try to run the following (compiled from coffeescript):

if (Meteor.isClient) {
   Meteor.startup(function() {
   return filepicker.setKey('A9FiXXdu5RB^GYujfDPwlz'); //not my actual key, don't worry
 });}

I get: Uncaught ReferenceError: filepicker is not defined

So, that's kind of a bummer. Any ideas? I've tried removing and re-adding both coffeescript and filepicker. is there some load-order issue? I note that filepicker-load.js has an alert if the script fails to load, which I'm not seeing...

Answer 1

your syntax looks good and matches what i use in my app - i'm thinking that since filepicker loads the script by injecting a script element, you have a timing issue (calling setKey before the script is loaded)

maybe hold off on setting the key until the user does something, like

filepicker.setKey("KEY");
filepicker.pickAndStore({...},function(error){...});

or set it with a timeout

Meteor.setTimeout(function(){
  filepicker.setKey("KEY");
},1000);

you could also use an interval to check if desired (more tolerant of long load times) - you could adjust this to give up after a certain amount of time

var filepickerInterval = Meteor.setInterval(function(){
   if(filepicker){
     Meteor.clearInterval(filepickerInterval);
     filepicker.setKey("KEY");
   }
}, 100);

Answer 2

I've had the exact same problem and for me, neither wrapping it in a setTimeout() nor a setInterval() worked.

Ink themselves provide a great non-blocking script in their docs, that queues all filepicker calls until its fully loaded and then executes them in the order they were called. This is how it works:

1. mrt remove filepicker (if added)
2. mrt remove loadpicker (if added)
3. create new file /lib/filepicker.js

/lib/filepicker.js

if (Meteor.isClient) {
    (function(a) {
        if (window.filepicker) {
            return
        }
        var b = a.createElement("script");
        b.type = "text/javascript";
        b.async = !0;
        b.src = ("https:" === a.location.protocol ? "https:" : "http:") + "//api.filepicker.io/v1/filepicker.js";
        var c = a.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c);
        var d = {};
        d._queue = [];
        var e = "pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");
        var f = function(a, b) {
            return function() {
                b.push([a, arguments])
            }
        };
        for (var g = 0; g < e.length; g++) {
            d[e[g]] = f(e[g], d._queue)
        }
        window.filepicker = d
    })(document);
    filepicker.setKey(YOUR_FILEPICKER_KEY);
}

This client code is a vanilla version of the non-blocking loader taken from https://developers.inkfilepicker.com/docs/web/. Using this, you can set the key once and then use filepicker as you like without worrying about if it's already loaded or not.

Of course you could also modify loadpicker with this, just paste in this code in your loadpicker.js

loadpicker.js

loadPicker = function(key) {
    (function(a) {
        if (window.filepicker) {
            return
        }
        var b = a.createElement("script");
        b.type = "text/javascript";
        b.async = !0;
        b.src = ("https:" === a.location.protocol ? "https:" : "http:") + "//api.filepicker.io/v1/filepicker.js";
        var c = a.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c);
        var d = {};
        d._queue = [];
        var e = "pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");
        var f = function(a, b) {
            return function() {
                b.push([a, arguments])
            }
        };
        for (var g = 0; g < e.length; g++) {
            d[e[g]] = f(e[g], d._queue)
        }
        window.filepicker = d
    })(document);
    filepicker.setKey(key)
};

Hope this works for you!

Answer 3

You also can use the asynchronous javascript snippet to auto-queue calls to the filepicker object until the script loads. See https://developers.inkfilepicker.com/docs/web/#javascript