麻煩filepicker腳本加載流星

Question

我並沒有在我的流星項目加載filepicker包到目前爲止運氣。

我做了什麼：

$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/ 

所以在這一點都看起來像我期望的那樣。 （我甚至雙重檢查了filepicker包的內容，它包含了我期望的所有內容，加載的源具有與在filepicker.io站點上找到的URL相同的URL，等等）。

但是，當我試着運行下面的（從CoffeeScript的編譯）：

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

我得到：未捕獲的ReferenceError：filepicker沒有定義

所以，這是怎樣的一個令人失望的。有任何想法嗎？我嘗試刪除並重新添加coffeescript和filepicker。有一些加載順序問題嗎？我注意到，如果腳本加載失敗，這我沒有看到filepicker-load.js有警報...

Answer 1

你的語法看起來不錯，符合我在我的應用程序中使用 - 我想我既然filepicker通過注入一個腳本元素加載腳本，你有一個時機的問題（調用setkey的腳本加載之前）

可能推遲設置鍵，直到用戶做一些事情，比如

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

或以超時

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

設置

你也可以使用一個間隔來檢查所需的（長的加載時間更寬容） - 你可以調整這個一定的時間後放棄

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

Answer 2

您還可以使用異步JavaScript代碼段在腳本加載之前將調用自動排隊到filepicker對象。見https://developers.inkfilepicker.com/docs/web/#javascript

Answer 3

我已經有完全相同的問題，對我來說，既不包裝setTimeout()也不setInterval()工作。

墨水本身在它們的docs中提供了一個很好的無阻塞腳本，它將所有文件選擇器調用排隊，直到完全加載，然後按照它們被調用的順序執行。這是如何工作的：

1. mrt remove filepicker（如果加）
2. mrt remove loadpicker（如果加）
3. 創建新的文件/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); 
} 

此客戶端代碼是一個香草版本從https://developers.inkfilepicker.com/docs/web/取得無阻塞裝載機。使用這個，你可以設置一次密鑰，然後使用filepicker，而不必擔心它是否已經加載。

當然，你也可以修改loadpicker這一點，只需粘貼此代碼在您的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) 
}; 

希望這對你的作品！