Meteor: How to save files with 'submit form' instead of 'change' events

Question

I am trying to submit an image.. and I've been at this for the past two days. It seems like it's super simple but I can't get it the way I want it to.

In the examples for collectionFS (and every other example I can find), they use an event that's called 'change'. https://github.com/CollectionFS/Meteor-CollectionFS

This event will update and save the file everytime the user wants to upload an image (or any file). They don't have to press "submit" to save it.

Is this the correct way to do things? I am trying to change it so I can blend event into my 'submit form' event, but it doesn't seem to work.

 'submit form': function(event, template) {
  console.log('this logs')

  FS.Utility.eachFile(event, function(file) {
    console.log('this doesnt log');
    Images.insert(file, function(err, fileObj) {
      if (err) {
        // handle error
      } else {
        // handle success depending what you need to do
        var userId = Meteor.userId();
        var imagesURL = {
          "profile.image": "/cfs/files/images/" + fileObj._id
        };
        Meteor.users.update(userId, {
          $set: imagesURL
        });
      }
    });
  });
}

However, this doesn't seem to save the file. It doesn't even run the FS.Utility.eachFile part. I've tried all sorts of variations, but if I listed them all I'm afraid it would make a terribly long post. I thought perhaps someone could point me to the right direction? I've tried saving the file into a variable and then inserting them... but I can't seem to get FS.Utility to run with a submit form.

Any help would be much appreciated!

Answer 1

Hope the below example helps.

<template name="fileupload">
  <form class="form-horizontal" role="form">
    <input type="file" name="...">
    <button type="submit" value="Update" class="btn btn-primary">Upload File</button>
  </form>
</template>

Template.fileupload.events({

  'submit form': function (event, template) {
    console.log("Submit form called");

    event.preventDefault();
    var fileObj = template.find('input:file');

    FilesCollection.insert(fileObj.files[0], function (err, fileObj) {
    });
  }
});

Answer 2

For those who struggle with this later, it's an issue with the assumptions the package makes at the present (1-5-2015). In cfs_base-packages.js:

FS.Utility.eachFile = function(e, f) {
  var evt = (e.originalEvent || e);
  var files = evt.target.files;
  if (!files || files.length === 0) {
    files = evt.dataTransfer ? evt.dataTransfer.files : [];
  }
  for (var i = 0; i < files.length; i++) {
    f(files[i], i);
  }
};     

It's looking for a your event to be structured like this: event.originalEvent.target.files, however the event triggered by submit is originalEvent.target: "" So a dirty work-around would be to do something like this:

Template.templateName.events({
      'submit .myForumClass': function(event, template) {
        event.preventDefault();
        event.originalEvent.target = {};
        event.originalEvent.target.files = event.currentTarget[0].files; 
       //0 is the position of the input field in the parent form
        FS.Utility.eachFile(event, function(file) {
         Images.insert(file, function (err, fileObj) {
          //stuff
          });
       });
     },
  });