How to show confirmation message before "removedfile" event is raised, in dropzone?

Question

In dropzone, the removedfile event is raised after the remove button has been clicked and therefore not suitable for showing a confirmation message to user before the image is removed. Is there any other event that can be handled to show a confirmation message to the user before deleting the image?

Answer 1

I know this is somewhat an old question, but I've just got the same problem and I want to share the solution I found if anyone need it. If you set the dictRemoveFileConfirmation on your dropzone's option, it will automatically ask for confirmation before the file is removed from the queue.

same issue here

Answer 2

This can be done. It's awkward, kludgy and involves a bit of a hack. The API really wasn't built for it.

As mentioned by @dapidmini, you need to set dictRemoveFileConfirmation to a non-null value. This enables the process you're looking for. Keep reading.

Once you assign dictRemoveFileConfirmation, all you're going to get is an ugly javascript modal yes/no dialog, which is called by Dropzone.confirm(...). Not good.

Here's the snippet of source from Dropzone that starts the process, from the removeFileEvent callback. I've added my comments...

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

So the hack begins by re-assigning the Dropzone.confirm callback to your own callback.

E.g.

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

}
...

If you are using something like Bootstrap, you could re-assign the above method, and launch the bootstrap modal to provide some decent visuals.

$(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>