Using dropzone.js with meteor.js

Question

I am confused about something. I am trying to use the dropzone.js meteor package (http://atmospherejs.com/dbarrett/dropzonejs) with my meteor application but I could not find a

Answer 1

Dropzone can be a bit confusing:

First you should get a file management system for Meteor. The standard right now is CollectionFS:

https://github.com/CollectionFS/Meteor-CollectionFS

Then you need to add a file system. I use GridFS, which breaks up large files into chunks and stores them for you into Mongo:

https://github.com/CollectionFS/Meteor-cfs-gridfs/

Follow the instructions for creating, publishing, and subscribing to your new, special, FS Collection:

example for creating the collection: 

MyImages = new FS.Collection('myImages', {
    stores: [new FS.Store.GridFS("myImages")]
});

After those two are installed, create your dropzone:

Then in your javascript:

Template.imageUpload.rendered = function(){

  if (Meteor.isClient){

    var arrayOfImageIds = [];

    Dropzone.autoDiscover = false;

    // Adds file uploading and adds the imageID of the file uploaded
    // to the arrayOfImageIds object.

    var dropzone = new Dropzone("form#dropzone", {
        accept: function(file, done){
            MyImages.insert(file, function(err, fileObj){
                if(err){
                  alert("Error");
                } else {
                  // gets the ID of the image that was uploaded
                  var imageId = fileObj._id;
                  // do something with this image ID, like save it somewhere
                  arrayOfImageIds.push(imageId);
                };
            });
        }
    });
  };

};