Integrating Filepicker.IO with Meteor

问题

I've been checking out Meteor as a potential framework for a web application and one thing I need to be able to do is allow my clients to upload files through the app. I started checking out Filepicker.io as an avenue to incorporate this functionality but I'm having trouble getting the drag/drop field to render. It works fine on a test Rails app but on my demo Meteor app, it just looks like a blank input box.

回答1:

I imported the library to my /client folder by wget http://api.filepicker.io/v1/filepicker.js

then I could just

meteor.startup ->
  filepicker.setKey 'lalala'

and then create the widget by

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

回答2:

To make it easy I published an Atmosphere package (github loadpicker) that can be installed with Meteorite.

The filepicker script is loaded dynamically when called and the key is set on the filepicker success callback. It is save to load the script from template created or template rendered.

Install:

mrt add loadpicker

Call the script with your personal filepicker.io key and your callback function for creating the drag and drop area:

loadPicker(key, cb);

Sample integration looks like this:

 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;
}

回答3:

I'm working on the same issue right now, but that's because you need to render the filepicker after the template has been rendered. Right now filepicker runs before the template, so after template rendered run the file picker render code again.

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

回答4:

The following code is in coffeescript.

First you need to set the key properly:

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

Then you can setup client behavior by consuming the 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

来源：https://stackoverflow.com/questions/13016382/integrating-filepicker-io-with-meteor

标签

meteor

filepicker.io