How to get image from gridFS in Meteorjs

Question

I am using gridFS package in MeteorJS.

Which system loads the product with the image header, category and price. This is stored in the product collection.

Using the template helper, I can get the product from db with its name {{title}} and price {{price}}. But I'm stuck getting the image using the link in the product document.

Can anyone help me with this?

    <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">
                            <a href="/productpage">{{title}}</a>
                        </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 save the link in the productImages collection as follows.

 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 cleaner

Now you can use the helper context and thishow it is.

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})
   }
})