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

In react , on Change event of input field , the event has no files on cancel event, we can proceed with this assumption. Cancel event will be captured. on file selection it wont be undefined.

  handleChange = (event) => {
    console.log(event);
    console.log(event.target.files[0]);
    this.setState({
      tableDataResult: false,
    });
    if(event.target.files[0]){
      this.setState({
        csvfile: event.target.files[0],
      });
    }else{
//Cancel event called
      console.log("false");
      this.setState({
        csvfile: oldValue,
      });
    }
  };

<input
                                        style={{
                                          width: "450px",
                                          marginLeft: "15px",
                                          marginTop: "5px",
                                        }}
                                        className="csv-input"
                                        type="file"
                                        ref={(input) => {
                                          this.filesInput = input;
                                        }}
                                        name="file"
                                        placeholder={null}
                                        onChange={this.handleChange}
                                      />

Answer 4

Yes, we have a problem catching cancel button. There is no event. Life hack solutions is use other events: Event "focus" on file input, or "mousemove" on window. Input file field must be visible for "focus" event. With mouse event, you need to delay when catch event.

Answer 5

In other to capture the cancel event on an input element with type="file", you can listen to the change event on the element and check whether the user has selected any files or canceled the dialog box. Follow the code snippet in JavaScript:

<input type="file" id="myFileInput">

<script>
  const fileInput = document.getElementById('myFileInput');

  fileInput.addEventListener('change', event => {
    const files = event.target.files;
    
    if (files.length > 0) {
      // The user selected some files
      console.log('Files selected:', files);
    } else {
      // The user canceled the dialog box
      console.log('Dialog box canceled');
    }
  });
</script>

Note that I first select the input element with id="myFileInput". I then added an event listener for the change event on the element. Inside the event listener, I check the files property of the event.target object to see if the user has selected any files. If the files array has a length greater than 0, we know that the user has selected some files, and we log them to the console. If the file array has a length of 0, it means the user has canceled the dialog box, and log a message to the console indicating that the dialog box was canceled.

Answer 6

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