Meteor and filepicker-plus package

Question

I am having a little bit of trouble outputting a image after a filepicker selection with the file picker plus package from meteor. How to I grab the uploaded image url or file path, so I can pass it into a form input and put it in a collection. Putting in into the collection isnt the part I am worried about its getting the path that I am having trouble with cheers.

All contained in postSubmit template.

I have a form with

<input type="filepicker" name="myName" />

and a img output in the same template

  <img src="{{filepickerIdToUrl myName}}">

and a router file containg

     Router.onBeforeAction(function(){
    loadFilePicker('magickey');
   //can leave out key if its in settings
   this.next();

},{only:['postSubmit']});

Here is the full postSubmit template

<template name="postSubmit">
  <form>
      <label for="title">Title</label>
      <input name="title" id="title" type="text" value="" placeholder="Name your post"/>
      <button id="uploadImage" class="btn btn-info btn-sm"><i class="fa fa-upload"></i> Upload</button>
      <input type="submit" value="Submit"/>
  </form>
    <img id="imagePreview" class="img-responsive" src="{{filepickerIdToImageUrl imageId placehold_it='500x350' h=200 w=300}}"/>
                    <button id="removeImage" class="btn btn-warning btn-sm"><i class="fa fa-trash-o"></i> Remove</button>

This is also my postSubmit events

Template.postSubmit.events({
  'submit form': function(e) {
    e.preventDefault();

    var post = {
      title: $(e.target).find('[name=title]').val(),
      image: $(e.target).find('[name=image]').val()

    };

    Meteor.call('postInsert', post, function(error, result) {
      // display the error to the user and abort
      if (error)
        return alert(error.reason);

      Router.go('postPage', {_id: result._id});
    });
  }
});

Answer 1

Thanks to Nate and the google groups link above, I got it working.

Here is my solved code, Right now it only shows the preview on the form and you can remove it by clearing the session value, but it will be easy enough to grab that session value and put it into the form on submit.

Thanks again Nate.

Template.postSubmit.created = function(){
    Session.setDefault("imageId", null);
    Session.setDefault("imageKey", null);
};



Template.postSubmit.events({



  'submit form': function(e) {
    e.preventDefault();

    var post = {
      title: $(e.target).find('[name=title]').val(),
      image: $(e.target).find('[name=image]').val()

    };

    Meteor.call('postInsert', post, function(error, result) {
      // display the error to the user and abort
      if (error)
        return alert(error.reason);

      Router.go('postPage', {_id: result._id});
    });
  },
  'click #uploadImage':function(event, template){
        event.preventDefault();
        filepicker.pickAndStore(
            {
                mimetypes: ['image/gif','image/jpeg','image/png'],
                multiple: false
            },{
                access:"public"
            },
            function(InkBlobs){
                                // the upload is now complete to filepicker - but the form hasnt persisted the values to our collection yet
                Session.set("imageId", _.last(_.first(InkBlobs).url.split("/")));
                Session.set("imageKey", _.first(InkBlobs).key);
                                //  once the session changes are made, the form will now have the new values, including a preview of the image uploaded
            },
            function(FPError){
                log.error(FPError.toString());
            }
        );
    },

    'click #removeImage':function(event, template){
        event.preventDefault();
        Session.set("imageId", "remove");
        Session.set("imageKey", "remove");
    }
});

Template.postSubmit.helpers({
    'hideRemove':function(){
        return Session.equals("imageId", null) || Session.equals("imageId", "remove");
    },
    'imageId':function(){
        if(Session.equals("imageId", "remove"))
            return "";
        else
            return Session.get("imageId") || "";
    },
    'imageKey':function(){
        if(Session.equals("imageKey", "remove"))
            return "";
        else
            return Session.get("imageKey") || "";
    }
});