Is there a way to use Filepicker.com uploader instead of the file type

[rufusthecat]

I have been trying to load the filepicker on an Autoforms on afFieldInput name='data.attributes.status' type='file' by replacing type="file" with type="filepicker" which is how it is called but it is not working since there are no extensions for this except for the CFS package. How would one go about adding this. And if no easy way, is there someone I could hire to do this. Thanks

[abecks]

you can create custom field types in AutoForm. i have actually done this with filepicker before and its pretty simple. I will try to post the code later today.

[rufusthecat]

Thanks, much appreciated

[abecks]

Here is mine:

<template name="imageUpload">
    {{#if image}}
        <img class="form-control-image" src="{{image}}/convert?h={{this.atts.maxHeight}}&fit={{this.atts.fit}}">
    {{/if}}
    <input type="hidden" data-schema-key="{{dsk}}" value="{{image}}">
    <div>
        <button type="button" class="btn btn-primary form-control-btn upload">{{this.atts.buttonLabel}}</button>
    </div>
</template>

AutoForm.addInputType("imageUpload", {
  template: "imageUpload",
  valueOut: function() {
    return this.val();
  },
  contextAdjust: function(context) {
    if (!context.atts.maxHeight) {
      context.atts.maxHeight = 50;
    }

    if (!context.atts.buttonLabel) {
      context.atts.buttonLabel = 'Upload Image';
    }

    if (!context.atts.fit) {
      context.atts.fit = 'max';
    }

    return context;
  }
});

Template.imageUpload.created = function() {
  load();

  this.src = new ReactiveVar();
  if (this.data.value) {
    this.src.set(this.data.value);
  }
};

Template.imageUpload.helpers({
  dsk: function() {
    return this.atts['data-schema-key'];
  },
  image: function() {
    return Template.instance().src.get();
  }
});

Template.imageUpload.events({
  'click .upload': function(e, tpl) {
    filepicker.pickAndStore({
        conversions: [],
        services: [
          'COMPUTER', 'FTP', 'URL', 'WEBCAM'
        ],
        maxfiles: 1,
        folders: false,
        mimetypes: ['image/*']
      }, {
        location: 'S3',
        path: '/images/',
        access: 'public'
      },
      function(Blob) {
        tpl.src.set(Blob[0].url);
      }
    );
  }
});

// Safe loading of filepicker when multiple controls are on the same page
var loading = false;

var load = function() {
  if (loading) {
    return;
  }
  loading = true;

  if (typeof filepicker === 'undefined') {
    loadFilePicker();
  }
};

Template.imageUpload.copyAs('imageUpload_bootstrap3');

Uses the Reactive Attributes core package as well as the Filepicker.io package here: https://atmospherejs.com/natestrauser/filepicker-plus

[rufusthecat]

Thanks @abecks Works fine