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?

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?

• javascript
• jquery
• dropzone.js

3 Answers 3

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

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 ments...

// 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("plete", autoExec);
  dropzone.emit("addedfile", configSys);  
  dropzone.emit("plete", 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./jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit./enyo/dropzone/master/dist/dropzone.css" rel="stylesheet" />
<script src="https://rawgit./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>

Option 1: You could use the dictRemoveFileConfirmation option. Please note that this will use the ugly JS alert dialog box.

For example:

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?"
});

Option 2: If you override removedFile function, you can add customised script to confirm deletion as the file preview won't be automatically removed.

For example:

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

For further readings, DropzoneJS documentation click here.