4

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

4

4 回答 4

4

我通过 wget http://api.filepicker.io/v1/filepicker.js将库导入到我的 /client 文件夹

那么我可以

meteor.startup ->
  filepicker.setKey 'lalala'

然后创建小部件

Template.fileUpload.rendered = ->  
  filepicker.constructWidget document.getElementById('uploadWidget')
于 2012-10-29T15:26:02.497 回答
3

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

文件选择器脚本在调用时动态加载，并且在文件选择器成功回调上设置密钥。从创建的模板或渲染的模板加载脚本是保存的。

安装：

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;
}
于 2013-05-14T10:08:24.203 回答
1

我现在正在处理同样的问题，但那是因为您需要在模板渲染后渲染文件选择器。现在文件选择器在模板之前运行，所以在模板渲染之后再次运行文件选择器渲染代码。

filepicker.constructWidget(document.getElementById('inputID'));
于 2012-10-22T17:16:15.923 回答
-2

以下代码在咖啡脚本中。

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

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
于 2012-10-23T05:01:03.733 回答