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

Hutton

are you using a meteor package for dropzone.js? where is the template coming from? If you are using a package, then it would help if you could point us to it, so we can try to make sense of it. In meteor, a package can choose to implement the server-side part or not. dropzone.js itself (non-meteor-package) just does the client side, but there are plenty of examples of how to implement the server side code for that if necessary. – Mandatory

atmospherejs.com/dbarrett/dropzonejs this is the package – Hutton

that package doesn't say anything about the server side. Please read the documentation for dropzone.js to see how the server side could be implemented. – Mandatory

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

};

Leland

Very nice. However, is there any way to have the progress bar of dropzone behave normally? So far it displays nothing as the progress bar... Or get success and error event? – Liver

Answer 2

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.

Hypoxia

Answer 3

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

Helse