How to get an image from gridFS in Meteorjs - mongodb

Question

I am using the gridFS package in MeteorJS.
What system does is upload a product with an image a title, a category and a price. This gets saved in the products collection.
With a template helper I can get a product from the db with it's title {{title}} and price {{price}}. But I'm stuck getting the image using the reference in de the product document.
Can anyone help me with that?
<template name="product">
<div class="small-6 medium-3 columns end">
<div class="product-container">
<div class="image-container">
{{#with image}}
<img src="{{this.url}}" class="product-image" alt="" />
{{/with}}
</div>
<div class="product-details">
<div class="product-title">
{{title}}
</div>
<div class="product-price">
{{price}}
</div>
<div class="product-buttons">
<span class="icon-heart"></span>
<span class="icon-repost"></span>
<span class="icon-plus"></span>
</div>
</div>
</div>
</div>
</template>
<template name="home">
{{#each products}}
{{> product}}
{{/each}}
</template>
Products = new Mongo.Collection("products");
var productImagesStore = new FS.Store.FileSystem('productImages', {
path: '~/uploads/full'
});
productImages = new FS.Collection('productImages', {
stores: [productImagesStore]
});
productImages.allow({
insert: function () {
return true;
},
update: function () {
return true;
},
remove: function () {
return true;
},
download: function () {
return true;
}
});
if (Meteor.isClient) {
// This code only runs on the client
Template.home.helpers({
products: function () {
return Products.find({});
},
image:function(){
return productImages.findOne({'metadata.productId':this._id})
}
});
Template.add.helpers({
categories: function(){
return categories.find({});
}
});
Template.add.events({
"submit form": function(event, template) {
event.preventDefault();
var file = $('#file').get(0).files[0],
fsFile = new FS.File(file),
productData = {
title:$('#title').val(),
price:$('#price').val(),
category:$('#category').val()
}
Products.insert(productData,function(err,result){
if(!err){
fsFile.metadata = {
productId:result, //we use metadata to refer the recent object id with the product images
}
productImages.insert(fsFile,function(err,result){
if(!err){
console.log("New images inserted")
}
});
}
});
}
});
}

Answer 1

You can store the reference on the productImages collection like this.
var file = $('#file').get(0).files[0],
fsFile = new FS.File(file),
productData = {
title:$('#title').val(),
price:$('#price').val(),
category:$('#category').val()
}
Products.insert(productData,function(err,result){
if(!err){
fsFile.metadata = {
productId:result, //we use metadata to refer the recent object id with the product images
}
productImages.insert(fsFile,function(err,result){
if(!err){
console.log("New images inserted")
}
});
}
});
This is the same insert but a little bit more cleaner
Now you can use the helper and the this context like this.
HTML
{{#each products}}
{{title}}
{{price}}
{{#with image}}
IMG URL:{{this.url}}
<img src="{{this.url}}" />
{{/with}}
{{/each}}
JS(Helpers)
Template.example.helpers({
products:function(){
return Products.find()
},
image:function(){
return productImages.findOne({'metadata.productId':this._id})
}
})