Uploading image with form to meteor on form submit

I am trying to create a simple web application that will ask the user to fill in a few questions and then upload a photo. I would like all this information to be stored in the Meteor collection when the submit button is clicked, but I am having difficulty with the FS Collection package.

Here is the relevant main.html:

    <form class="photoForm">
    Problem: <input type = "text" id = "problem" placeholder="page # problem #"><br><br>
    Your group members <input type = "text" id="group" size="50"> <br><br>
    Your questions and comments about this problem: <br><br>
    <textarea name="comments" form="photo" rows="4" cols="70" placeholder="Enter text here..."></textarea>
    <br>

    Upload a snapshot of your work here: <input type = "file" id = "myFileInput">
    <br /><br />

    <input type="submit" value="submit" />
    </form>

      

        
        
        
      

    

Here's main.js:

Template.form.events({ 
'click input[type=submit]': function(event, template) {

console.log("form submit")
event.preventDefault();

FS.Utility.eachFile(event, function(file) {


  Images.insert(file, function (err, fileObj){
    //Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
  });

});
 }   
});

      

        
        
        
      

    

Here are my questions:

• I can only get the file to load on the "change.myFileInput" event. I tried to get it to upload "click input [type = submit]" and "submit" and it doesn't upload the file. Is there a way to force it to download the file when the submit button is clicked?

• How do I add data from various text fields to a collection of images? Can I include these additions in the Images.insert () command?