Meteor file upload not working

Question

I'm trying to upload images via Meteors CollectionFS but I'm not getting any errors in the client side code so I'm not sure what's broken. I see the console.log message "inside upload" but I don't see any success or fail messages from the Images.insert callback. Help.

myproject/client/upload.html

<template name="upload">
  <form>
  <input class="upload" type="file" id="upload" name=".../">
  </form>
</template>

myproject/client/upload.js

Template.providerblock.events({
  'click .upload': function(event, template) {
    event.preventDefault();
    var photo =  $('#upload')[0];
    var file = photo.files[0];
    console.log("inside upload");
    Images.insert(file, function (err, fileObj) {
      if(err) {
        console.log("unable to upload file");
      } else {
        console.log("file upload success");
      }
    });
  },
});

myproject/lib/images.js

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

Images.allow({
  insert: function() {
    return true;
  },
  update: function() {
    return true;
  },
  remove: function() {
    return true;
  },
  download: function() {
    return true;
  }
});

Answer 1

You should:

1. Use 'change .upload': instead of 'click .upload':.
2. Images instead of var Images so you can use the variable in other file.