CODEWITHSUNDEEP
meteorfilepicker.io
iamnotpretending
iamnotpretending

Reputation: 125

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.

Upvotes: 4

Views: 2843

Answers (4)

guido
guido

Reputation: 1418

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

Upvotes: 3

Perseoh
Perseoh

Reputation: 612

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

Upvotes: 4

Tyr
Tyr

Reputation: 1049

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

Upvotes: -2

Harry
Harry

Reputation: 54939

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

Upvotes: 1

Related Questions