Take the 2-minute tour ×

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.

share|improve this question
add a code sample to make it easier for people to suggest improvements –  Aksel Willgert Oct 22 '12 at 17:35
We created a filepicker meteor sample library a bit ago, it may give you a start. github.com/Filepicker/meteor –  brettcvz Oct 22 '12 at 20:22
Did you read this post? stackoverflow.com/questions/11790191/meteor-file-uploads –  Samo Mar 13 '13 at 2:08

4 Answers 4

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')
share|improve this answer
What does -> mean? You mean: Template.agregaProveedor.rendered = function(){ filepicker.constructWidget(document.getElementById('uploadWidget')); }; –  Acapulco Jan 15 '13 at 9:34
And how do you display it in the html? –  Acapulco Jan 15 '13 at 9:35
Yes, the '->' is coffeescript notation. I use '<input type="filepicker" id='uploadWidget'/>' in my HTML to place the filepicker button. –  Perseoh Jan 16 '13 at 12:25
@perseoh Any way to have multiple pick buttons on a page? (using an ID limits to one per page). Wondering if you have seen a good answer. –  ppedrazzi Dec 13 '13 at 17:04
Would a coffee-->js edit be rude here? Most people who land here don't seem to speak coffee. –  meawoppl Feb 26 at 5:47

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.


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


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


#exampleDropPane {
  text-align: center;
  padding: 20px;
  background-color: #F6F6F6;
  border: 1px dashed #666;
  border-radius: 6px;
  margin-bottom: 20px;
share|improve this answer

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.

share|improve this answer

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) ->
    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
share|improve this answer

Your Answer


