Skip to content

guido4000/loadpicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Filepicker.io on demand package for Meteor

Package to use Filepicker in Meteor, loads on demand, optional callback.

How to install

  1. Install Meteorite (if not already installed)

     npm install -g meteorite
    
  2. Add package

     mrt add loadpicker
    

A. How to use with upload button

  1. Set your Filepicker key on client JS

     var key = "your filepicker key";
    
  2. Call the script on demand from template.yourTemplate.created or template.yourTemplate.rendered

     loadPicker(key);
    
  3. Call Filepicker from template.yourTemplate.events with a click or submit event

     filepicker.pick();
    

Sample integration

if (Meteor.isClient) {
  Session.set("widgetSet", false);
  var key = "xxxxxxxxxxxxxxxxx";

  Template.home.rendered = function ( ) { 
    if (!Session.get("widgetSet")) {  
      loadPicker(key);
    }
  };

  Template.home.events({
    'click button' : function () {
      filepicker.pick();
    }
  });
}

B. How to use with drop widget or drop area

  1. Set your Filepicker key on client JS

     var key = "your filepicker key";
    
  2. Call the script on demand from template.yourTemplate.created or template.yourTemplate.rendered with callback

     loadPicker(key, callback);
    
  3. Call Filepicker from template.yourTemplate.events and include callback function to create widget or drop pane

     var cb = function () {
       filepicker.constructWidget(document.getElementById('constructed-widget'));
       filepicker.makeDropPane($('#exampleDropPane')[0], { });
     };
    
     loadPicker(key, cb);
    

Sample integration with widget or drop pane and callback

if (Meteor.isClient) {
  Session.set("widgetSet", false);
  var key = "insert key here";

Template.hello.rendered = function () {
    if (!Session.get("widgetSet")) {  
      var cb = function () {
        filepicker.constructWidget(document.getElementById('constructed-widget'));
        filepicker.makeDropPane($('#exampleDropPane')[0], { });
      };
      loadPicker(key, cb);
    }
  };

HTML (include the type tag for the widget!):

<h1>Widget</h1>
  <div id="constructed-widget" value="empty" type="filepicker-dragdrop" style="display: none;">
  </div>
<h1>Drop Pane</h1>
  <div id="exampleDropPane">Drop Here!</div>
  <div><pre id="localDropResult"></pre></div>

CSS for drop pane

#exampleDropPane {
  text-align: center;
  padding: 20px;
  background-color: #F6F6F6;
  border: 1px dashed #666;
  border-radius: 6px;
  margin-bottom: 20px;
}

About

Filepicker On Demand Smart Package for Meteor

Resources

Stars

Watchers

Forks

Packages

No packages published