Capturing cancel event on input type=file

Question

I have a html5 application that makes use of the file API, using an element. I am able to respond when the user selects a file. I would like to be able to do something if the user cancels the file choice. However, I can find no event that is fired on the input element if the user clicks on the cancel rather than ok button in the file chooser dialogue.

Is there some event fired on 'cancel' that I am missing, or should I re-architect my app to not need this?

Answer 1

There isn't really a listener to check for if a file was selected, you could get around it by setting a note in your code using the on change event like so:

var FileChoosen = false;

var inputElement = document.getElementById("inputField");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  var fileList = this.files; /* now you can work with the file list */


  //Check if the layout was changed from file API:
  if(document.getElementById('fileOutput').innerHTML != "") {
    FileChoosen = true;
    setTimeout("funcCalledToCheckUserSelection()", 500);
  };


}

Answer 2

I have the same question, the solution is surprisingly very easy ... at least in my case NW.js (Node-Webkit) fires oncancel event if user click the [cancel] button in the file chooser dialogue. You use this simple and native way if you're also on NW.js (process.version is v5.11.0).

I also tried Microsoft HTA on Windows 10, it does not fire the oncancel event.

Answer 3

When user clicks cancel, change event triggers again. Thats works for me;

        $('#attachedFiles').bind("change", function () {
            var file = this.files[0];
            if (file) {
                // if file selected, do something
            } else {
                // if user clicks 'Cancel', do something
            }
        });