I have 2 Collections (one of which is a standard Collection and the other is a CFS Collection to store my uploaded images):
Products = new Mongo.Collection('products');
and
Uploads = new FS.Collection('uploads', {
stores: [new FS.Store.FileSystem('uploads', {path: '~/projectUploads'})]
});
Some documents inside the Products collection has a field or key/value pair of 'product_main_image' which stores the filename of the uploaded file that is stored in the Uploads CFS collection.
On my page I set a helper:
Template.admin_products.helpers({
products: function(){
console.log('inside helperproduct');
return Products.find();
}
});
and in the html I have:
{{#each products}}
{{product_name}}
{{product_main_image}}
{{/each}}
But instead of the actual filename as displayed by {{product_main_image}}
I would like to display the uploaded file as if I accessed it using this code:
Uploads.findOne({"original.name":product_main_image});
This page is where I display all of the products using {{#each products}}
and I would also like to display the image for each product that is stored in the Uploads CFS Collection.
Is this possible? and how may I achieve this? Thank you...
Is this possible? Yes
how may I achieve this?
You can use the context of this
. on the Uploads.findOne()
This is how the HTML should look.
{{#each products}}
{{product_name}}
{{product_main_image}}
{{#with image}}
<img src="{{this.url}}" />
{{/with}}
{{/each}}
And the image helper.
Template.example.helpers({
image:function(){
Uploads.findOne({"original.name":this.product_main_image});
}
})
Here is a quick MeteorPad showing how can you achieve this (im using 2 dummy collection but the idea is the same)