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 any example about it. In the documentation it says: Use the template like this

{{> dropzone url='http://somewebsite.com/upload' id='dropzoneDiv'}}

and

it will post any uploaded files to the url of your choice.

So if I write,

{{> dropzone url='http://localhost:3000/home' id='dropzoneDiv'}}

as soon as I drop the image, is it going to upload it to /public/home folder? I mean is the package handling server-side saving image too? If not, can you please give me some tips about how I can handle the server side saving?

Thank you

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:

<template name="imageUpload">
  <form action="/file-upload" class="dropzone" id="dropzone"></form>
</template>

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

};