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 u

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