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:

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

};

Answer 2

Please find below link(example of dropzonejs):

https://github.com/devonbarrett/meteor-dropzone/tree/master/example-app

Put  {{>dropzone url="/upload" id="template-helper"}} In your template

<template name="test">
   {{>dropzone url="/upload" id="template-helper"}}
</template>

Then at server side:
if (Meteor.isServer) {
  Meteor.startup(function () {
    UploadServer.init({
      tmpDir: process.env.PWD + '/public/uploads',
      uploadDir: process.env.PWD + '/public/uploads',
      checkCreateDirectories: true,
      uploadUrl: '/upload'
    });
  });
}

Answer 3

I'm assuming, it doesn't show upload progress, because its instant with meteor.

You are updating mini-mongo location in-browser, so the changes are immediate.

Meteor DDP then handles the glue to get it to the server, and then pushing those changes to the other clients that might be subscribed. That "instant" update is the meteor magic. Alert yourself, or log to console on success. You can also check the db via MyImages.find().fetch().

If they are there, all done.