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

To accomplish the same action as the most upvoted answer without the cost of filepicker.io, follow the instructions for this package: https://github.com/Lepozepo/S3

Then to obtain the link, use code similar to below. Finally, plug the url returned by secureLink into the DB.

Template.YourTemplate.events({
  "click button.upload": function() {
    var files = $("input.file_bag")[0].files;
    S3.upload(files, "/subfolder", function(e,r) {
      console.log(r);
      Session.set('secureLink', r.secure_url);
    })
  }
});

Template.YourTemplate.helpers({
  "files": function() {
    return S3.collection.find();
  },

  "secureLink": function() {
    return Session.get('secureLink');
  }
});

Answer 2

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 3

If you do not require significantly large files or maybe only storing the files for a short period of time then this simple solution works very well.

In your html...

<input id="files" type="file" />

In your template event map...

Template.template.events({
  'submit': function(event, template){
    event.preventDefault();
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      _.each(template.find('#files').files, function(file) {
        if(file.size > 1){
          var reader = new FileReader();
          reader.onload = function(e) {
            Collection.insert({
              name: file.name,
              type: file.type,
              dataUrl: reader.result
            });
          }
          reader.readAsDataURL(file);
        }
      });
    }
  }
});

Subscribe to the Collection and in a template render a link...

<a href="{{dataUrl}}" target="_blank">{{name}}</a>

While this might not be the most robust or elegant solution for large files or a file intensive application it works very well for all kind of file formats if you want to implement simple upload and download/rendering of the files.

Answer 4

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.

Answer 5

You could try uploading directly to amazon S3, doing some tricks with js uploaders and stuff. http://aws.amazon.com/articles/1434

Answer 6

here is yet another solution:

https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/

This one is using Blueimp's upload solution that supports chunked uploads, progress bars and more.