Integration of Filepicker.IO with Meteor

Question

I am testing Meteor as a potential framework for a web application, and one thing I need to do is let my clients upload files through the application. I started checking Filepicker.io as an avenue to enable this functionality, but I was having trouble getting the drag / drop field to render. It works fine in a test Rails application, but in my Meteor demo application it just looks like an empty input field.

Answer 1

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

then i could just

meteor.startup -> filepicker.setKey 'lalala' 

and then create a widget

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

Answer 2

To make it easy, I published the Atmosphere package ( github loadpicker ), which can be installed using Meteorite.

The file picker script is loaded dynamically upon invocation and the key is set on the callback of a successful file attempt. The loading of the script from the template created or created by the template is saved.

Install:

 mrt add loadpicker 

Call the script with your private key filepicker.io and a callback function to create a drag region:

 loadPicker(key, cb); 

An integration example is as follows:

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

Answer 3

I am working on the same problem right now, but that is because you need to display filepicker after rendering the template. Right now filepicker starts before the template, so after the template is rendered, run the file selection code again.

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

Answer 4

The following code is in the coffeescript file.

First you need to set the key correctly:

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

Then you can customize client behavior using 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