Integrating Filepicker.IO with Meteor

Question

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.

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. https://github.com/Filepicker/meteor — brettcvz, Oct 22 '12 at 20:22
Did you read this post? http://stackoverflow.com/questions/11790191/meteor-file-uploads — Samo, Mar 13 '13 at 02:08

score 4 · Accepted Answer · answered Oct 29 '12 at 15:26

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

answered Oct 29 '12 at 15:26

Perseoh

612
8
13

1

What does -> mean? You mean: Template.agregaProveedor.rendered = function(){ filepicker.constructWidget(document.getElementById('uploadWidget')); }; – Acapulco Jan 15 '13 at 09:34
And how do you display it in the html? – Acapulco Jan 15 '13 at 09:35
1

Yes, the '->' is coffeescript notation. I use '' 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
1

Would a coffee-->js edit be rude here? Most people who land here don't seem to speak coffee. – meawoppl Feb 26 '14 at 05:47

score 3 · Answer 2 · answered May 14 '13 at 10:08

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

score 1 · Answer 3 · answered Oct 22 '12 at 17:16

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

score -2 · Answer 4 · answered Oct 23 '12 at 05:01

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

Integrating Filepicker.IO with Meteor

4 Answers4

Linked