流星和filepicker加包

Question

我在流星file picker plus package FileCRicker选择后输出图像有点麻烦。如何抓取上传的图片url或文件路径，以便将其传递到表单输入并将其放入集合中。加入收藏并不是我担心的一个问题，那就是我无法获得欢呼的麻烦。

所有包含在postSubmit模板中。

我有

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

一种形式，在相同的模板

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

一个IMG输出和路由器文件方含

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

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

这里是全postSubmit模板

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

这也是我postSubmit事件

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

多亏Nate和谷歌的群体上面的链接，我得到了它的工作。

这里是我解决的代码，现在它只显示窗体上的预览，你可以通过清除会话值来删除它，但它会很容易抓住该会话值并将它提交到提交时的表单。

再次感谢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") || ""; 
    } 
});