meteor Filepicker.io


Example

To scale things, we have to stop using local storage on our server, and start using either a dedicated file storage service or implement a horizontal storage layer. The easiest way to get started with scalable file storage is to use a solution like Filepicker.io, which supports S3, Azure, Rackspace, and Dropbox. loadpicker has been a popular Filerpicker unipackage for awhile.

meteor add mrt:filepicker

The Filepicker pattern is rather different than the other solutions, because it's really about 3rd party integration. Begin by adding a filepicker input, which you'll see relies heavily on data-* attributes, which is a fairly uncommon pattern in Meteor apps.

<input type="filepicker"
  id="filepickerAttachment"
  data-fp-button-class="btn filepickerAttachment"
  data-fp-button-text="Add image" 
  data-fp-mimetypes="image/*"
  data-fp-container="modal"
  data-fp-maxsize="5000000" 
  data-fp-services="COMPUTER,IMAGE_SEARCH,URL,DROPBOX,GITHUB,GOOGLE_DRIVE,GMAIL">

You'll walso want to set an API key, construct the filepicker widget, trigger it, and observe it's outputs.

if(Meteor.isClient){
  Meteor.startup(function() {
    filepicker.setKey("YourFilepickerApiKey");
  });
  Template.yourTemplate.rendered = function(){
    filepicker.constructWidget($("#filepickerAttachment"));
  }
  Template.yourTemplate.events({
  'change #filepickerAttachment': function (evt) {
    console.log("Event: ", evt, evt.fpfile, "Generated image url:", evt.fpfile.url);
  });
});