collections2 and meteor-cfs-autoform to upload and display image - mongodb

Question

I am using collections2 and meteor-cfs-autoform for schemas and to upload and display image using cfs:gridfs storage adaptor package but unable to show images in template.Can you please tell me where i am doing mistake and its solution.
collections.js
Recipes = new Mongo.Collection('recipes');
Reviews = new Mongo.Collection('reviews');
RecipesImages = new FS.Collection("recipesImages", {
stores: [new FS.Store.GridFS("recipesImages")]
});
RecipesImages.allow({
insert: function(userId, doc) {
return true;
},
update: function(userId, doc, fieldNames, modifier) {
return true;
},
download: function(userId) {
return true;
},
fetch: null
});
Recipes.attachSchema(new SimpleSchema({
name: {
type: String,
label: "Recipe Name",
max: 100
},
ingredients: {
type: [Object],
minCount: 1
},
"ingredients.$.name": {
type: String
},
"ingredients.$.amount": {
type: String
},
description: {
type: String,
label: "How to prepare ",
},
time: {
type: Number,
label: "Time (Minutes)",
},
image: {
type: String,
autoform: {
afFieldInput: {
type: "cfs-file",
collection: 'recipesImages',
label: 'Recipe Picture'
}
}
}
}));
recipes.js
Template.recipes.helpers({
'showRecipes':function(){
return Recipes.find();
},
'images': function () {
return RecipesImages.findOne({_id:id}) ;
}
})
recipes.html
<template name="recipes">
{{#each showRecipes}}
<div class=" col-md-4">
<div class="panel panel-default mb " >
<div class="panel-image">
<img src="{{this.url }}" class="panel-image-preview" />
</div>
<div class="panel-body">
<h4>{{name}}</h4>
<p>{{description}}</p>
</div>
<div class="panel-footer text-center" >
<p>its footer </p>
</div>
</div>
</div>
{{/each}}
</template>

Answer 1

Are you importing cfs:ui? If not, you should include it so that you can use the FS.GetFile helper. Then you can use this code.
Recipes Template
<template name="recipes">
{{#each showRecipes}}
<div class=" col-md-4">
<div class="panel panel-default mb " >
<div class="panel-image">
{{#with FS.GetFile "recipesImages" image}}
<img src="{{url}}" class="panel-image-preview" />
{{/with}}
</div>
<div class="panel-body">
<h4>{{name}}</h4>
<p>{{description}}</p>
</div>
<div class="panel-footer text-center" >
<span class="glyphicon glyphicon-open-file"></span>
</span><small> {{time}}</small>
<span class="glyphicon glyphicon-heart likes" style="vertical-align:middle"></span><small>2 </small>
<span class="glyphicon glyphicon-share"></span>
</div>
</div>
</div>
{{/each}}
</template>
Recipes helpers
Template.recipes.helpers({
'showRecipes':function(){
return Recipes.find();
}
});
Here's the link to cfs:ui documentation