Javascript 如何为GridFS覆盖DropzoneJS的XHR？

我目前正在使用Meteor、CollectionFS和GridFS StorageAdapter开发一个图像共享平台

我也在使用这个优秀的包，但问题是它对CollectionFS的实现，特别是关于XHR和uploadprogress的东西

现在，我使用

问题：上传文件时，我注意到控制台中有不必要的POST请求 同时放置来自CollectionFS的请求。 我在dbarrett_dropzone.js文件中将它们缩小到xhr.send。 为了阻止它们，我尝试了template.rendered>dropzone选项：

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

或覆盖dropzone.accept：

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

但它会阻止填充队列数组，这是CollectionFS插入所需的

问：我认为需要覆盖dropzone.uploadFilesfiles函数，所有的xhr内容都是在这个函数中编写的， ... 但是我所有的尝试都失败了，有人能提出一个实现方案吗

理想情况下，我认为这样的实现应该是这样的：

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

更新

在测试了许多解决方案后，我最终得到了以下工作解决方案：

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

虽然与DropzoneJS事件的预期不完全一致，但至少进度显示可以正常工作，而不会触发xhr POST

错误：_ref.parentNode未找到，来自removedFile事件

如果任何人有一个更干净的实现，请随时发布

如果enyo阅读了这篇文章，更正我的示例会很好，为什么不在DropzoneJS主页上共享呢。

---

大气包页面中的dbarrett也是如此。

我使用以下代码使用DropzoneJs和GridFS发送图像。用于在将图像发送到服务器之前首先在客户端调整图像大小

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

    });
}