Using dropzone.js with meteor.js

问题:

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

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

};

回答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.

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