I am developing my first meteor app, and have just implemented uploading images using CollectionFS and gridfs. I can successfully view my uploaded images using <img src="{{this.url}}">
but I need to access it from the client in Meteor. I am trying to use a field from another document in a collection and call an image based on if the fields match in the metadata. (Basically joining the two documents using a Spacebars registerHelper). I am hesitant to embed the other documents with the image, because I am worried about the space requirements.
I have tried looking through the Meteor-cfs-ui package but am having trouble translating it into my own Spacebar registerHelper. Looking through the UI Helpers page on Meteor-CollectionFS, has a broken link to where my answer I believe resides.
I can view all images I upload so that is not the problem using {{this.url}}. Just trying to get the url for the images in the collection using a query on the FS.Collection on the client side is troubling me.
Here is my code:
client.html
{{#each individualBuyOffers}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h4>{{shoePict make}}</h4>
</div>
</div>
{{/each}}
client.js
UI.registerHelper('shoePict',function(context,options){
if(context){
//The goal is to query the Pictures collection
//and find the url to the picture I want
//then output it to HTML from the SafeString
//Pictures is my FS.Collection
var url = Pictures.find({'metadata.make': context});
//var collection = FS._collections[Pictures];
//return collection ? collection.findOne(id) : null;
//I know this is not the right statement
return new Spacebars.SafeString( "<img src=\"{{this.url}}\">") ;
}
});
If there are any other easier solutions to attaching a picture from CollectionFS to another document through html, I would love to hear it. I am just trying to learn. Thanks.