My go-to solution is using . They handle the file upload, storage in S3, and provide a convenient URL for access. I simply take that URL and store it in my database.

1. First step is to download the filepicker script to your client folder.

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

2. Next, insert a filepicker input tag:

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

3. Then, initialize it during startup:

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

4. Add an event handler:

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

When it comes to handling images, I have a technique that is similar to the one used by Dario, but with a slight twist - I skip saving the file on disk altogether. Instead, I store the image data directly in the database as a field within the respective model. This approach suits my needs perfectly as I primarily target browsers that are compatible with the HTML5 File API, and my requirements for image support are quite basic.

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) {
      // Incorporate the image data into your model
      model.update(id, { $set: { src: e.target.result }});

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

Check out my latest approach to handling file uploads by leveraging Meteor.methods and the HTML5 File API. I'm interested in hearing your thoughts on it.

A new solution has emerged: edgee:slingshot. This package changes the game by avoiding file uploads directly to your meteor server, allowing it to focus on its core function of serving the meteor app without the burden of handling resource-intensive transfers.

Instead, files are sent to cloud storage services, with current support for AWS S3 and Google Cloud Files, and future plans to include Rackspace Cloud Files and even Cloudinary.

Your meteor server simply acts as a middleman in this process.

This package is not only versatile but also lightweight, making it a standout choice for efficient file management.

Discover a unique atmosphere plugin known as router that specializes in this feature.

For the ultimate file upload solution, check out collectionFS

Looking for a top-notch solution? Look no further! This method utilizes collectionFS.

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

Client Side Implementation:

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(); // adding custom data
            YourFileCollection.insert(yourFile, function (err, fileObj) {
                if (!err) {
                   // handle callback events here
                }
            });
        });
    }
});

Server Configuration:

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 Setup:

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

If you don't need to deal with huge files or only plan on storing them temporarily, this straightforward approach is quite effective.

In your HTML file...

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

In your template event mapping...

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 display a link in a template...

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

While this may not be the most robust solution for handling large files or extensive file operations, it serves well for various file formats when you simply need a basic upload/download feature.

One option is to upload content directly to Amazon S3 by using JavaScript uploaders and other techniques. Check out this article on how to do it!

Looking at the meteor roadmap, it appears that the feature "File upload pattern" is set for release "After 1.0". So, we will have to be patient and wait for an official solution to become available.

In the meantime, a good option is to utilize "collectionFS" (currently in version 0.3.x dev preview).

Another suggestion is to use inkfilepicker (formerly filepicker.io). While this requires an Internet connection on the user's end, it is a simple and effective solution.

If you just want to experiment, you can also explore utilizing HTML5 features for file uploads, like in this example.

Here's a different approach you may find helpful:

This method utilizes Blueimp's upload solution, which offers chunked uploads, progress bars, and more features.

If you want to achieve the same result as the top-rated answer but without using filepicker.io, you can follow the steps outlined in this package: https://github.com/Lepozepo/S3

After that, you can retrieve the link by using code similar to the one below. Then simply add the returned URL from secureLink into the database.

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