How do I confirm before deleting multiple files in blueimp jQuery FileUpload?

Question

I've been able to confirm for individual deletes, but the .delete button in the ui toolbar seems to just run the delete click for all selected items.

What I'd really like to do is suppress my delete prompt for individual items in this context and prompt once for the array of selected items (ideally listing filenames as for individual files). My individual override is as follows:

$('#fileupload').bind('fileuploaddestroy', function (e, data) {
  var filename = data.url.substring(data.url.indexOf("=") + 1,data.url.indexOf("&"))
  var delconf = confirm("Delete the file \"" + decodeURIComponent(filename) + "\"?");
    if(!delconf) {
        e.preventDefault;
        return false;
    }
});

I'm not even sure if there is a specific event to override for multiple deletes, or how I would go about finding it, so any advice on those topics will be helpful too.

Answer 1

So far my answer has been to modify jquery.fileupload-ui.js with the following code in the _initButtonBarEventHandlers function:

        this._on(fileUploadButtonBar.find('.delete'), {
            click: function (e) {
                if(this._trigger('multiDestroy')){                      
                    if (e.isDefaultPrevented()) {
                        return false;
                    }
                    e.preventDefault();
                    filesList.find('.toggle:checked')
                        .closest('.template-download')
                        .find('.delete').click();
                    fileUploadButtonBar.find('.toggle')
                        .prop('checked', false);
                    this._trigger('multiDestroyFinished');
                }
            }
        });

Plus blank callbacks at about line 381:

// Callback for multiple file deletion:
multiDestroy: function (e) {},
// Finished callback for multiple file deletion:
multiDestroyFinished: function (e) {}

my inline code looks like this:

var multiDel = false;

$('#fileupload').on('fileuploaddestroy', function (e, data) {
      if(multiDel){ return true; };
      var filename = data.url.substring(data.url.indexOf("=") + 1,data.url.indexOf("&"))
      var delconf = confirm("Delete the file \"" + decodeURIComponent(filename) + "\"?");
      if(!delconf) {
          e.preventDefault;
          return false;
      }
});

$('#fileupload').fileupload({
    multiDestroy: function (e) {
        var delconf = confirm("Are you sure you wish to delete the selected files?");
        if (!delconf) {
            e.preventdefault;
            return false;
        } else { 
            multiDel = true; 
        }
    }
})
.fileupload({
    multiDestroyFinished: function (e) {
      multiDel = false;
    }
});

I wouldn't say I'm exactly happy with this answer, in part because wrapping the click function in an if block seems dirty, and in part because I'm rewriting Sebastian's plugin instead of extending it. I'm unlikely to accept my answer, so if anyone else has a better one, bring it on!