Meteor, how to set context data in template event function

Question

I would like to set context data in an event handler that inserts new uploaded photos to the image FScollection. What I want to set is the newly generate id of the photo file. I need to pass this id to a child template to do further processing. Below is the code I am working with:

How should I define data I want to use later in an event handler?

images.js

Template.Profile.events({
        'change #uploadBtn': function(event, template) {
            var name = $("#uploadBtn").val();
            $("#uploadFile").val(name);
            FS.Utility.eachFile(event, function(file) {
                Images.insert(file, function (err, fileObj) {               
                    if (err){
                        // handle error
                    } 
                    else {
//here I want to set fileObj._id as data for further usage.

                    }

                });
            });
        }
    });

    Template.imageView.helpers({
        images: function () {          
            return Images.findOne({_id: this.imageId}); 
        }
    });

Template.imageView.events({
            'click #deleteBtn': function (event) {
                this.remove();
            }
        });

template file

  images.html

    <template name="Profile">
      <input id="uploadFile" placeholder="Choose File" disabled="disabled" style="cursor: auto; background-color: rgb(235, 235, 228); "/>
      <div class="fileUpload btn btn-primary">
        <span>Upload</span>
        <input id="uploadBtn" type="file" name="…" class="upload">
      </div>
      {{> imageView}}
    </template>

    <template name="imageView">
      <div class="imageView">

        {{#if images}}
          <div style="width: 120px;height: 120px;margin-bottom: 30px;">
            <div style="float: middle;">
              {{#with images}}
              <button id="deleteBtn" type="button" class="btn btn-primary" >Delete</button>
              {{/with}}
            </div>

            <a href="{{images.url}}" target="_blank" >
              <img src="{{images.url}}" alt="" class="thumbnail" style="width: 96px; height: 96px;"/>
            </a>        
          </div>

        {{/if}}
      </div>
    </template>

Answer 1

You have a couple choices.

1. Include the _id of the image in the object that is referring to it
2. Include the _id of the object in the image itself as parentId or similar

For the first case, in the callback from Image.insert use the _id of the image and then do a .update() on the parent object (is this a user perhaps?) to include a reference to the image. If you're allowing multiple images then you might want to update an array with those _ids.

In the second case you can update the object you just inserted in the callback from the insertion with the parentId that you need.

Then you just need to include the appropriate clause in your query for the dependent images and thanks to reactivity it will update automatically.