title: How to get an image from gridFS in Meteorjs
body: <p>I am using the gridFS package in MeteorJS.</p>
  
  <p>What system does is upload a product with an image a title, a category and a price. This gets saved in the products collection. </p>
  
  <p>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.</p>
  
  <p>Can anyone help me with that?</p>
  
  <pre><code>    &lt;template name="product"&gt;
          &lt;div class="small-6 medium-3 columns end"&gt;
                  &lt;div class="product-container"&gt;
                      &lt;div class="image-container"&gt;
                          {{#with image}}
                              &lt;img src="{{this.url}}" class="product-image" alt="" /&gt;
                          {{/with}}
                      &lt;/div&gt;
                      &lt;div class="product-details"&gt;
                          &lt;div class="product-title"&gt;
                              &lt;a href="/productpage"&gt;{{title}}&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="product-price"&gt;
                              {{price}}
                          &lt;/div&gt;
                          &lt;div class="product-buttons"&gt;
                              &lt;span class="icon-heart"&gt;&lt;/span&gt;
                              &lt;span class="icon-repost"&gt;&lt;/span&gt;
                              &lt;span class="icon-plus"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/template&gt;
  </code></pre>
  
  <p><br /></p>
  
  <pre><code>    &lt;template name="home"&gt;
      {{#each products}}
          {{&gt; product}}
      {{/each}}
      &lt;/template&gt;
  </code></pre>
  
  <p><br /></p>
  
  <pre><code>    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")
                              }
                          });
                      }
                  });
              }
          });
      }
  </code></pre>