CODEWITHSUNDEEP
mongodbmeteormongodb-querymeteor-autoform
Rashad Nasir
Rashad Nasir

Reputation: 146

MeteorJS: Autoform + CollectionFS, associating images from an FS.Collection with Corresponding Mongo.Collection Document?

I'm building a very small Meteor application simply to get a better understanding of Autoform and CollectionFS, and their use together. I currently have everything set up with the following packages:

iron:router, aldeed:autoform, aldeed:collection2, cfs:standard-packages,
cfs:filesystem, cfs:autoform

I have a sample Mongo Collection assigned to "Books" set up with a SimpleSchema attached, with fields from the demo like title and author. The corresponding code for the file upload is:

fileId: {
  type: String,
  autoform: {
    afFieldInput: {
      type: "cfs-file",
      collection: "images"
    }
  }
}

The FS.Collection code is:

Images = new FS.Collection("images", {
 stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});

This is in conjunction to a quickform: {{> quickForm collection="Books" id="insertBookForm" type="insert"}}

The insert is fine, and I can iterate over the documents and display the various fields using spacebars and a helper function called "books", like so:

{{#each books}}
    <li>{{title}} by {{author}}</li>
{{/each}}

I can also iterate over images uploaded to the FS.Collection with a helper returning the entire collection called "files," and looping over them like so:

{{#each files}}
  <img src="{{this.url}}" />
{{/each}}

The issue I'm having is linking the two together. I want to be able to do something along the lines of: 

{{#each books}}
  <li>{{title}}, by {{author}} <img src="The-Corresponding-Image}}" /></li>
{{/each}}

Obviously not that exact layout, but I basically just want to be able to print images with their corresponding titles and authors to be able to use autoform with collectionfs for my needs.

I'm stuck trying to retrieve the fileId from a specific document in the Books collection, and then plugging that into an Images.findOne({fileId: fileId}) and linking the two together.

Can anyone point me in the right direction?

Upvotes: 3

Views: 2125

Answers (1)

Rashad Nasir
Rashad Nasir

Reputation: 146

I was able to figure it out thanks to Ethaan's guidance. What I had to do was the following:

Autoform Hook:

AutoForm.hooks({
 insertBookForm: {
   after: {
     insert: function(error, result, template) {
       insertedFile = Books.findOne(result).fileId;
       Images.update({_id: insertedFile}, {$set: {'book': result}});
     }
   }
 }
});

I set a field of 'book' to the _id of the document being inserted (stored in the result parameter) right after it was inserted.

This is my corresponding HTML:

{{#each books}}
  <li>{{title}} by {{author}}</li>
    {{#with files}}
        <img src="{{this.url}}" />
    {{/with}}
{{/each}}

And my helpers:

Template.layout.helpers({
  books: function () {
    return Books.find({});
  },
  files: function() {
    return Images.findOne({book: this._id});
  }
});

Upvotes: 6

Related Questions