Question

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

我也使用了优秀的包dbarrett:dropzonejs，但问题是它对CollectionFS的实现，特别是关于XHR和uploadprogress的东西。

现在，我使用this code。

问题：上传文件时，我注意到在控制台中有意外的POST请求以及来自CollectionFS的PUT请求。我把它们缩小到dbarrett_dropzone.js文件中的xhr.send（）。为了阻止他们，我尝试了template.rendered＆gt; 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");
},

但它会阻止填充Queue数组，这是CollectionFS插入所需要的......

问题：我认为需要覆盖dropzone.uploadFiles（files）函数，其中写入了所有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();
     }
});

Answer 1

<强>更新

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

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触发。

错误：＆＃34; _ref.parentNode＆＃34;没找到，来自＆＃34; removedFile＆＃34;事件

如果有人有更清洁的实施，请随时发帖！

如果enyo读过这个，那么更正我的例子会更好，为什么不在DropzoneJS主页中分享它。对于大气包装页面中的dbarrett也是如此。

Answer 2

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

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

    });
}

如何用GridFS覆盖DropzoneJS的XHR？

2 个答案: