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

There currently doesn't seem to be a way to interact with the HTTP server or do anything related to HTTP.

The only things you can do is talk to server over the RPC methods exposed by Meteor.methods or talk to mongoDB directly over the mongoDB API exposed.

Answer 2

Here is the best solution for this time. It uses collectionFS.

meteor add cfs:standard-packages
meteor add cfs:filesystem

Client:

Template.yourTemplate.events({
    'change .your-upload-class': function(event, template) {
        FS.Utility.eachFile(event, function(file) {
            var yourFile = new FS.File(file);
            yourFile.creatorId = Meteor.userId(); // add custom data
            YourFileCollection.insert(yourFile, function (err, fileObj) {
                if (!err) {
                   // do callback stuff
                }
            });
        });
    }
});

Server:

YourFileCollection = new FS.Collection("yourFileCollection", {
    stores: [new FS.Store.FileSystem("yourFileCollection", {path: "~/meteor_uploads"})]
});
YourFileCollection.allow({
    insert: function (userId, doc) {
        return !!userId;
    },
    update: function (userId, doc) {
        return doc.creatorId == userId
    },
    download: function (userId, doc) {
        return doc.creatorId == userId
    }
});

Template:

<template name="yourTemplate">
    <input class="your-upload-class" type="file">
</template>

Answer 3

You can see on the meteor roadmap that the feature "File upload pattern" is scheduled for "After 1.0". So we have to wait to see an official way.

For now, one of the best ways is to use "collectionFS" (which is 0.3.x dev preview at the time of writting).

Or inkfilepicker (ex. filepicker.io) as suggested here. It is easy enough to use, although this obviously requires and Internet connection from the user side.

If it just to play around, you could as well take advantage of the html5 feature. Something like that.

Answer 4

There is a new package: edgee:slingshot. It does not upload the files to your meteor server, but it is better that way as it allows the meteor server to focus on its primary objective of serving the meteor app instead of handling costly file transfers.

Instead it uploads files to cloud storage services. Currently it supports AWS S3 and Google Cloud Files, but it will also support Rackspace Cloud Files and perhaps Cloudinary in the future.

Your meteor server merely acts as as a coordinator.

It is also a very versatile and light-weight package.

Answer 5

there is an atmosphere package called router which allows just that.

actually, the best way to handle file uploads is now collectionFS

Answer 6

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);
  }
});