Images uploading but not showing

help
1

I am beginner and trying to learn Meteor by myself and i am struggling this problem since 4 days and i think i am quite close to solve it but still need some help.
I am trying to show image for relevant recipe and all uploaded images are adding into collection but they are not showing and also all image recipe display panels have same image url e.g

<img src="/cfs/files/recipesImages/oEhiy4yk7xYRx2PFY/4.jpg" class="panel-image-preview">

Can you please have a look and help me to solve it.
My complete source code is here Github

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

<template name="recipes">
    {{#each showRecipes}}

        <div class=" col-md-4">
            <div class="panel panel-default mb " >
                <div class="panel-image">

                    {{#with FS.GetFile "recipesImages" images._id}}
                        <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" >
                              <p>this is panel footer </p>
                    </div>
                </div>
    {{/each}}
</template>

recipes.js

Template.recipes.helpers({
    'showRecipes':function(){
        return Recipes.find();
    },
    'images': function () {
        return RecipesImages.findOne() ;
    }
})
2

//Edited sorry, I didn’t see the second helper.

Let’s try the following:

{{url storage=‘recipesImages’}}

3

@XTA I tried but it does not work :confounded: Can You please clone it from Github and then run this app and add recipe .I think then you will be in better position to find the problem.As i have done what ever i know with my limited Meteor Knowledge as i am still learning it.

4

Okay, this one should work:

//Helpers

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

},
'images': function () {
    return RecipesImages.findOne({_id:this.image}) ;
}

})

// Template

<div class="panel-image">
 <img src="{{images.url storage='recipesImages'}}" class="panel-image-preview" />
</div>

So you also have to remove the “{{#with}}” part.

1 Like