Question

我一直在检查Meteor作为Web应用程序的潜在框架，我需要做的一件事是允许我的客户通过应用程序上传文件。我开始检查Filepicker.io作为合并此功能的途径，但我无法获得拖放字段进行渲染。它在测试Rails应用程序上运行良好，但在我的演示Meteor应用程序中，它看起来像一个空白的输入框。

Answer 1

我通过wget http://api.filepicker.io/v1/filepicker.js

将库导入my / client文件夹

然后我可以

meteor.startup ->
  filepicker.setKey 'lalala'

然后按

创建小部件

Template.fileUpload.rendered = ->  
  filepicker.constructWidget document.getElementById('uploadWidget')

Answer 2

为了方便起见，我发布了可与Meteorite一起安装的Atmosphere软件包（github loadpicker）。

调用时动态加载filepicker脚本，并在filepicker成功回调上设置密钥。保存以从创建的模板或呈现的模板加载脚本。

安装：

mrt add loadpicker

使用您的个人filepicker.io键和回调函数调用脚本以创建拖放区域：

loadPicker(key, cb);

示例集成如下所示：

 if (Meteor.isClient) {
  Session.set("widgetSet", false);
  var key = "xxxxxxxxxxxxxxxxx";
  var cb = function () {
    filepicker.makeDropPane($('#exampleDropPane')[0], {
      dragEnter: function() {
        $("#exampleDropPane").html("Drop to upload").css({
          'backgroundColor': "#E0E0E0",
          'border': "1px solid #000"
        });
      }
    });
  };

  Template.home.created = function ( ) { 
    if (!Session.get("widgetSet")) {  
      loadPicker(key, cb);
    }
  };
}

HTML

<h1>Drop Pane</h1>
<div id="exampleDropPane">Drop Here!</div>
<div><pre id="localDropResult"></pre></div>

CSS

#exampleDropPane {
  text-align: center;
  padding: 20px;
  background-color: #F6F6F6;
  border: 1px dashed #666;
  border-radius: 6px;
  margin-bottom: 20px;
}

Answer 3

我现在正在处理同一个问题，但那是因为你需要在渲染模板后渲染文件选择器。现在，filepicker在模板之前运行，因此在模板渲染后再次运行文件选择器渲染代码。

filepicker.constructWidget(document.getElementById('inputID'));

Answer 4

以下代码在coffeescript中。

首先，您需要正确设置密钥：

Meteor.startup ->
  filepicker.setKey 'YOUR API KEY'

然后，您可以通过使用API来设置客户端行为：

'click .upload': (e) ->
  filepicker.pickMultiple
    extensions: ['.png', '.jpg', '.gif', '.doc', '.xls', '.ppt', '.docx', '.pptx', '.xlsx', '.pdf', '.txt']
    container: 'modal'
    services: ['COMPUTER']
    (fpfiles) =>
        #do whatever you want to process the data filepicker provided you after upload was done
        Meteor.call 'uploadFiles', fpfiles

将Filepicker.IO与Meteor集成

4 个答案: