Using dropzone.js with meteor.js

Question

I'm embarrassed by something. I am trying to use the metzone package dropzone.js ( http://atmospherejs.com/dbarrett/dropzonejs ) with my meteor application, but I could not find any example about this. The documentation says: Use a template like this

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

and

it will send any uploaded files to your chosen URL.

So if I write

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

As soon as I take the image, it will be uploaded to the / public / home folder? I mean, does server-side packet processing save the image too? If not, can you give me some tips on how I can deal with server storage?

thanks

Answer 1

Dropzone can get a little confused:

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

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

Then you need to add the file system. I use GridFS, which breaks large files into pieces and stores them for you in Mongo:

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

Follow the instructions to create, publish, and subscribe to the new FS special collection:

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

After these 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

I assume that this does not show the progress of the download, because its instant with a meteor.

You are updating the location of the mini-mongo in the browser, so the changes take place immediately.

Meteor DDP then processes the glue to get it on the server, and then pushing these changes to other clients that can be signed. This “instant” update is meteor magic. Confirm yourself or go to the console for success. You can also check db via MyImages.find (). Fetch ().

If they are there, everything is done.

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