How would one handle a file upload with Meteor?

Question

What would be the canonical way to handle a file upload with Meteor?

Answer 1

I used http://filepicker.io. They'll upload the file, store it into your S3, and return you a URL where the file is. Then I just plop the url into a DB.

1. Wget the filepicker script into your client folder.

   wget https://api.filepicker.io/v0/filepicker.js
   

2. Insert a filepicker input tag

   <input type="filepicker" id="attachment">
   

3. In the startup, initialize it:

   Meteor.startup( function() {
       filepicker.setKey("YOUR FILEPICKER API KEY");
       filepicker.constructWidget(document.getElementById('attachment'));
   });
   

4. Attach a event handler

   Templates.template.events({
       'change #attachment': function(evt){
           console.log(evt.files);
       }
   });
   

Answer 2

For images, I use a method similar to Dario's except I don't write the file to disk. I store the data directly in the database as a field on the model. This works for me because I only need to support browsers that support the HTML5 File API. And I only need simple image support.

Template.myForm.events({
  'submit form': function(e, template) {
    e.preventDefault();
    var file = template.find('input type=["file"]').files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      // Add it to your model
      model.update(id, { $set: { src: e.target.result }});

      // Update an image on the page with the data
      $(template.find('img')).attr('src', e.target.result);
    }
    reader.readAsDataURL(file);
  }
});

Answer 3

I've just come up with an implementation of file uploads using Meteor.methods and HTML5 File's API. Let me know what you think.