How to overwrite DropzoneJS's XHR for GridFS?

Question

I'm currently developping an image sharing plateform, using Meteor, CollectionFS and GridFS StorageAdapter.

I'm also using the excellent package dbarrett:dropzonejs, but problem is its implementation for CollectionFS, especially regarding XHR and uploadprogress stuff.

For now, i use this code.

Problem : when uploading files, i noticed in console unwanted POST requests alongside PUT requests from CollectionFS. I narrowed them down to xhr.send() in dbarrett_dropzone.js file. In attempt to stop them, i tried in template.rendered > dropzone options :

init: function() {
    this.on("sending", function(file,xhr) {
        xhr.abort(); //file.xhr.abort() does not work either...
    });
} // console shows "NS_ERROR_NOT_INITIALIZED"

or overwriting dropzone.accept :

},
accept: function(file,done) {
    done("dummy message");
},

but then it prevents Queue array to be populated, which is needed for CollectionFS inserts...

Question: i think needs to overwrite dropzone.uploadFiles(files) function, where all the xhr stuff is written, ... but all my attempts failed, can someone propose an implementation please ?

Ideally, i'm thinking such implementation would be like this :

Template.albumContent.rendered = function() {
    var dz = new Dropzone("form#dzId", {
        url: "#",
        autoProcessQueue: false,
        addRemoveLinks: true,
        acceptedFiles: "image/*",
        init: function() {
            this.on("success", function(file) {
                Meteor.setTimeout(function() {
                    dz.removeFile(file);
                },3000)
            });
        },
        uploadFiles: function(files) {
            var dzgqf = dz.getQueuedFiles();
            if (dzgqf.length) {
                dzgqf.forEach(function(file) {
                    var fsFile = new FS.File(file);
                    fsFile.owner = Meteor.userId();
                    Images.insert(fsFile, function(error, fileObj) {
                        if (error) throw new Meteor.Error("Error uploading this file : ", fsFile);
                        // how to pass properly fileObj.updateProgress() stuff to dz.uploadprogress event ???
                    });
                });
            }
        }
    });
}

Template.albumContent.events({
    "click .js-upload-all-images": function(event, template) {
        event.preventDefault(); event.stopPropagation();
        var dz = Dropzone.getElement("#dzId").dropzone;
        console.log("Queued files : ", dz.getQueuedFiles());
        dz.processQueue();
     }
});

Sharlaan · Answer 1 · 2015-10-14T12:27:33.790

UPDATE

After testing many work-arounds, i ended up with the working solution below :

Template.albumContent.rendered = function() {
    var dz = new Dropzone("form#dzId", {
        url: "#",
        autoProcessQueue: false,
        addRemoveLinks: true,
        acceptedFiles: "image/*",
        maxFilesize: 10,
        init: function() {
            this.on("success", function(file) {
                dz.removeFile(file);
            });
            this.on("queuecomplete", function() {
                dz.removeAllFiles(); // removes remaining rejected files
            });
        }
    });
}

Template.albumContent.events({
    "click .js-upload-all-images": function(event, template) {
        event.preventDefault(); event.stopPropagation();
        var dz = Dropzone.getElement("#dzId").dropzone,
            dzgqf = dz.getQueuedFiles();
        console.log("Queued files : ", dzgqf);

        if (dzgqf.length) {
            dzgqf.forEach(function(file) {
                var fsFile = new FS.File(file);
                fsFile.owner = Meteor.userId();
                fsFile.metadata = {
                    name: file.name
                };
                Images.insert(fsFile, function(error, fileObj) {
                    if (error) throw new Meteor.Error("Error uploading this file : ", fsFile);
                    Tracker.autorun( function() {
                        var fO = Images.findOne(fileObj._id);
                        if (fO.uploadProgress() !== 100) {
                            console.log(f0.metadata.name + ": chunk " + f0.chunkCount+"/"+fO.chunkSum + " - Progress " + fO.uploadProgress()+"%");
                            dz.emit("uploadprogress", file, fO.uploadProgress());
                        }
                        else {// if (fileObj.hasStored("mediasStore") {
                            console.log("File " + f0.metadata.name + " were successfully stored in FScollection 'Images'");
                            dz.emit(complete, file) // removes file's progressbar
                              .emit("success" file); // shows the checkmark then auto slides it out
                        }
                    });
                });
            });
        }
     }
});

Not really compliant with how DropzoneJS events expects, but at least progress displays are working, without xhr POSTs firing.

bugs: "_ref.parentNode" not found, from "removedFile" event

If anyone has a cleaner implementation, feel free to post !

If enyo read this, it would be nice to correct my example, and why not share it in DropzoneJS main page. Same for dbarrett in Atmosphere package page.

score 0 · Answer 2 · answered Jan 07 '16 at 12:08

I use the following code to send an image using DropzoneJs and GridFS. ProcessImage is used to resize the image on the client side first before sending it to the server.

Template.imageUpload.rendered = function() {
    Dropzone.autoDiscover = false;
    var dropzone = new Dropzone("form#dropzone", {
        acceptedFiles: 'image/*',
        accept: function(file, done) {

            processImage(file, 1024, 1024, function(data) {
                var img = new FS.File(data);
                img.owner = Meteor.userId();
                img.metadata = {
                    sourceId: Session.get('conditionUniqueId'),
                    staged: true
                };

                Images.insert(img, function(err, fileObj) {
                    if (err) {
                        return console.log(err);
                    } else {
                        dropzone.emit("complete", file).emit("success", file);
                    }
                });
            })

            done();
        }

    });
}

How to overwrite DropzoneJS's XHR for GridFS?

2 Answers2