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

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" >
                            <a href="{{pathFor 'show_recipe'}}"><span class="glyphicon glyphicon-open-file"></span></a>
                            <a href="#" ><span class="glyphicon glyphicon-time" style="vertical-align:middle"></span><small> {{time}}</small></a>
                            <a href="#"><span class="glyphicon glyphicon-heart likes" style="vertical-align:middle"></span><small>2 </small></a>
                            <a href="#"><span class="glyphicon glyphicon-share"></span></a>
                        </div>
                    </div>
                </div>
    {{/each}}
</template>

Recipes helpers

Template.recipes.helpers({
    'showRecipes':function(){
        return Recipes.find();
    }
});

Here's the link to cfs:ui documentation