如何在 dropzone 中引发“removedfile”事件之前显示确认消息？

Question

在dropzone 中，removedfile 事件在单击删除按钮后引发，因此不适合在图像被删除之前向用户显示确认消息。在删除图像之前，是否可以处理任何其他事件以向用户显示确认消息？

Answer 1

选项 1：您可以使用 dictRemoveFileConfirmation 选项。请注意，这将使用丑陋的 JS 警报对话框。

例如：

new Dropzone("#dropzone_container", {
        autoDiscover: false,
        uploadMultiple: true,
        parallelUploads: 1,
        maxFiles: 10,
        addRemoveLinks: true,
        //The addRemoveLinks option will use the following option for wording of the Confirmation message
        dictRemoveFileConfirmation:  "Are you sure?"
});

方案二：如果你重写removedFile函数，你可以添加自定义脚本来确认删除，因为文件预览不会被自动删除。

例如：

new Dropzone("#dropzone_container", {
        autoDiscover: false,
        uploadMultiple: true,
        parallelUploads: 1,
        maxFiles: 10,
        addRemoveLinks: true,
        removedfile: function (file) {

               //This is where you can add custom script to confirm deletion; 
               //You could use Sweetalert 2 or whatever you prefer than the ugly JS ugly alert box

               //This will manually removed the file
               file.previewElement.remove();
        }
);

如需进一步阅读，DropzoneJS 文档请点击here。

Answer 2

这是可以做到的。这很尴尬，很笨拙，并且涉及到一些技巧。 API 确实不是为它而构建的。

正如@dapidmini 所述，您需要将dictRemoveFileConfirmation 设置为非空值。这使您正在寻找的过程。继续阅读。

分配dictRemoveFileConfirmation 后，您将得到一个丑陋的javascript 模态yes/no 对话框，由Dropzone.confirm(...) 调用。 不好。

这里是来自 Dropzone 的源的 sn-p，它从 removeFileEvent 回调开始该过程。我已经添加了我的 cmets...

// if dictRemoveFileConfirmation is set, it will invoke Dropzone.confirm
if (_this.options.dictRemoveFileConfirmation) {
    return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function () {
        return _this.removeFile(file);
    });
} else {
    return _this.removeFile(file);
}

因此，黑客首先将Dropzone.confirm 回调重新分配给您自己的回调。

例如

...
Dropzone.confirm = function(question, fnAccepted, fnRejected) {

}
...

如果您使用的是 Bootstrap 之类的东西，您可以重新分配上述方法，并启动 bootstrap 模态以提供一些不错的视觉效果。

$(document).ready(function() {

  // get the dropzone reference
  let dropzone = $(".dropzone")[0].dropzone;
  // enable the removal option
  dropzone.options.addRemoveLinks = true;
  // enable the confirmation
  dropzone.options.dictRemoveFileConfirmation = "Do you really really really want to remove this?";
  let removeCallback = undefined;
  // add some files to the dropzone
  let autoExec = { name: 'autoexec.bat', size: 99999 };
  let configSys = { name: 'config.sys', size: 99999};
  dropzone.emit("addedfile", autoExec);
  dropzone.emit("complete", autoExec);
  dropzone.emit("addedfile", configSys);  
  dropzone.emit("complete", configSys);
  
  // override the removal callback behavior
  Dropzone.confirm = function(question, fnAccepted, fnRejected) {
    // retain the callback to invoke to accept the removal
    removeCallback = fnAccepted;
    // launch your fancy bootstrap modal    
    $("#js-modal").modal('show');
  };
  // listen to the click of #js-remove.  remove the item by calling removeCallback and then close the modal
  $("#js-remove").click(function() {
    if (removeCallback) {
      removeCallback();
    }
    $("#js-modal").modal('hide');
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" rel="stylesheet" />
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>

<div class="dropzone" action="put-your-upload-url-here">
</div>

<div id="js-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to remove this?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="js-remove" type="button" class="btn btn-danger">Remove</button>
      </div>
    </div>
  </div>
</div>

Answer 3

我知道这是一个老问题，但我也遇到了同样的问题，如果有人需要，我想分享我找到的解决方案。如果您在 dropzone 的选项中设置dictRemoveFileConfirmation，它将在文件从队列中删除之前自动要求确认。

same issue here