Filepicker.io on demand package for Meteor

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

How to install

Install Meteorite (if not already installed)
```
 npm install -g meteorite
```
Add package
```
 mrt add loadpicker
```

A. How to use with upload button

Set your Filepicker key on client JS
```
 var key = "your filepicker key";
```
Call the script on demand from template.yourTemplate.created or template.yourTemplate.rendered
```
 loadPicker(key);
```
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

Set your Filepicker key on client JS
```
 var key = "your filepicker key";
```
Call the script on demand from template.yourTemplate.created or template.yourTemplate.rendered with callback
```
 loadPicker(key, callback);
```

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

guido4000 / loadpicker Goto Github PK

loadpicker's Introduction

Filepicker.io on demand package for Meteor

How to install

A. How to use with upload button

Sample integration

B. How to use with drop widget or drop area

Sample integration with widget or drop pane and callback

loadpicker's People

Contributors

Stargazers

Watchers

Forkers

loadpicker's Issues

Recommend Projects

Recommend Topics

Recommend Org