如何覆盖DropzoneJS的GridH的XHR？

Question

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

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

现在，我用this code。

问题：当上传文件时，我注意到控制台不需要的POST请求 以及来自CollectionFS的PUT请求。 我将它们缩小到dhrrett_dropzone.js文件中的xhr.send（）。 在企图阻止他们，我试图在template.rendered>悬浮窗选项：

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.uploadFiles（文件）功能，所有的东西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

UPDATE

测试许多变通后，我结束了以下工作方案：

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主页中分享。 与Atmosphere包页面中的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(); 
     } 

    }); 
}