流星和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") || ""; 
    } 
});