第二个 dropzone 不监听事件

Question

我正在使用 DropzoneJS 上传文件，我偶然发现了一个我不知道答案的问题。

我基本上有两个拖放区：一个用于多个文件，一个用于单个文件。单文件版本是为了用不同的文件替换上传的文件，因此它只允许上传一个文件，而第一个文件允许多个文件。

第一个 dropzone 运行良好，但我注意到第二个 dropzone 没有正确监听 'sending' 事件和 'success' 事件。它会监听 'error' 事件和 'accept' 事件。第一个 dropzone 有相同的事件，但它适用于该 dropzone，有人知道如何解决这个问题吗？

感兴趣的代码在下面。

空降区

Dropzone.options.requestFileUpload = {
       init: function(){
           this.on('error', function (file, response) {
                console.log("error");
            }),
           this.on('sending', function (file, xhr, formData) {
               if (file.accepted)
                    formData.append('id', 'uploadFile');
            }),
           this.on('success', function (file, response) {
                console.log("success!");
            })
        },
        accept: function(file, done){
           console.log('file accepted!');
        },
        acceptedFiles: ".dxf",
        previewsContainer: false,
        parallelUploads: 5,
        createImageThumbnails: false
    }

    Dropzone.options.requestFileEdit = {
      init: function(){
          this.on('error', function (file, response) {
             //fired
          }),
          this.on('sending', function (file, xhr, formData) {
              // not fired
              console.log("SENDING");
              if (file.accepted)
                 formData.append('id', 'uploadFile');
          }),
          this.on('success', function(file, response){
              // not fired
              console.log('SUCCESS'); 
          })
      },
      accept: function(file, done){
        //fired
      },
      maxFiles: 1,
      acceptedFiles: ".dxf",
      previewsContainer: false,
      createImageThumbnails: false
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>
    <body>
       <!-- Some markup -->
       <form data-target="target_I_set_using_JS" action="myaction.php" class="dropzone" id="requestFileEdit"/>
       <!-- Some other markup -->
       <form action="myaction.php" class="dropzone" id="requestFileUpload"/>
    </body>

Answer 1

我不知道为什么会出现这个问题，但是当我稍微研究一下您的代码时，我发现从未调用其中一个拖放区的 init 方法。

这是一个 Dropzones 以编程方式初始化的解决方案（docs），在这种情况下，我可以看到两者dropzones 正在很好地处理事件（嗯，在 post 中，我只看到 error 处理程序被触发，但我认为它在现实世界场景中可以正常工作）

Dropzone.autoDiscover = false;

var dzRequestFileEdit = new Dropzone("div#requestFileEdit", {
  url: "/file/post",
  init: function() {
    console.log('initializing requestFileEdit ...');
    this.on('error', function(file, response) {
      console.log("error requestFileEdit");
    });
    this.on('sending', function(file, xhr, formData) {
      console.log('sending from requestFileEdit ...');
      if (file.accepted)
        formData.append('id', 'uploadFile');
    });
    this.on('success', function(file, response) {
      console.log("success!");
    });
  },
  accept: function(file, done) {
    console.log('file accepted!');
  },
  acceptedFiles: ".dxf",
  previewsContainer: false,
  parallelUploads: 5,
  createImageThumbnails: false
});

var dzRequestFileUpload = new Dropzone("div#requestFileUpload", {
  url: "/file/post",
  init: function() {
    console.log('initializing requestFileUpload ...');
    this.on('error', function(file, response) {
      console.log("error requestFileUpload");
    });
    this.on('sending', function(file, xhr, formData) {
      console.log('sending from requestFileUpload ...');
      if (file.accepted)
        formData.append('id', 'uploadFile');
    });
    this.on('success', function(file, response) {
      console.log("success!");
    });
  },
  accept: function(file, done) {
    console.log('file accepted!');
  },
  acceptedFiles: ".dxf",
  previewsContainer: false,
  parallelUploads: 5,
  createImageThumbnails: false
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/basic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>

<body>
  <!-- Some markup -->
  <div style="float:left;width:150px">
    <h3 style="margin:0">File Edit</h3>
    <div class="dropzone" id="requestFileEdit"></div>
  </div>

  <!-- Some other markup -->
  <div style="float:left;width:150px;margin-left:10px;">
    <h3 style="margin:0">File Upload</h3>
    <div class="dropzone" id="requestFileUpload"></div>
  </div>

</body>

让我知道这是否适合你，如果有什么不清楚的地方。

Answer 2

调试后我注意到我没有在接受处理程序下添加 done() 函数，这意味着该文件永远不会被接受。

基本上：

accept: function(file, done){
   //stuff
   done();
}

我觉得自己好傻..

第二个 dropzone 不监听事件

Second dropzone doesn't listen to events

javascript

dropzone.js