Hope to get guide how to handle image upload & show - image

Question

I am now working on one Meteor project and trying to do the below.
I have a product list page and when I click one product, I goes to product edit page.
What I want to know is how to attach product image and show it when I go back to product list page.
I know CollectionFS used for file upload, but because there is no reliable guide to show detail, I am getting trouble for it.
I added this to schema, but don't know how to show product image in list page.
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images")]
});
Images.allow({
insert: function(){
return true;
},
update: function(){
return true;
},
remove: function(){
return true;
},
download: function(){
return true;
}
});
Schemas.Products = new SimpleSchema({
'name': {
type: String,
label: 'What is the name of the building?',
max: 200,
unique: true
},
'picture': {
type: String,
max: 200,
optional: true,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'Images',
accept: 'image/*',
label: 'Choose file'
}
}
}
});
Is there anyone can give me a direction? Please help me!
The goal in here is to show product image in product list page.

Answer 1

I found this really helpful wiki on CollectionFS's page. It shows how to display an already uploaded image from front-end.
CollectionFS provides an url method associated with its FS.File object. Using this method we can display the image from frontend.
Steps:
Publish Images (FS.Collection instance) from server-side.
Subscribe to the above from your client-side.
In your template-helper, return Images.find() to the template.
You can embed the result of Images.find() into the result from another collection as well. For example:
var products = Products.find().fetch();
products.forEach(function(each) {
each.file = Images.findOne({ _id: each.file });
});
return products;
Inside the template, you can display the image using:
<img src="{{this.url stores='images'}}" />
Here this refers to the FS.File instance and 'images' is the store name.