How to detect when cancel is clicked on file input using JavaScript ?

This article describes the method to handle a situation when the user tries to input a file and later fails to upload the file. It gives the status to the user that the file is not uploaded. This may be useful in situations when an important file needs to be submitted or the application requires the file for its functionality. 

Note: This method works best with WebKit browsers such as Google Chrome and Safari. It may not work reliably with Mozilla Firefox.

Example:

HTML Code: The following code is defines in the HTML of the page.

filter_none

edit
close

play_arrow

link
brightness_4
code

<input type='file' id='theFile' onclick="initialize()" />

chevron_right


Explanation:



  • The property value type=”file” tells that the type of input the user enters is a file.
  • The property value id=”theFile” is used to link the JavaScript code to it using getElementById() method.
  • The property value onclick=”initialize()” is used to specify the function call when the user has clicked on the input.

JavaScript Code:

javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

// Get the file input element
var theFile = document.getElementById('theFile');
  
// Define a function to be called
// when the input is focused
function initialize() {
    document.body.onfocus = checkIt;
    console.log('initializing');
}
      
// Define a function to check if
// the user failed to upload file
function checkIt() {
    // Check if the number of files
    // is not zero
    if (theFile.value.length) {
      alert('Files Loaded');
    }
    // Alert the user if the number
    // of file is zero
    else {
      alert('Cancel clicked');
    }
    document.body.onfocus = null;
    console.log('checked');
}        

chevron_right


Explanation for the initialize() function:

  • The variable theFile is created and the input element is selected using its id.
  • The “document.body.onfocus = checkIt” line defines that the onfocus event is fired when an element gets focused.

Explanation for checkIt() function:

  • When the user uploads any file, the length of the files is found using theFile.value.length property. As this value becomes non-zero, the condition gets satisfied and an alert box appears that shows “Files Loaded”.
  • When the user does not upload a file, then the length of the files is a zero value. Due to this, the condition does not get satisfied and an alert box appears that shows “Cancel clicked”.

Complete Code: In this section, we will combine the above two sections of code to detect when cancel is clicked on file input.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>
        How to detect when cancel 
        is clicked on file input?
    </title>
</head>
  
<body>
    <input type='file' id='theFile' 
            onclick="initialize()" />
  
    <script>
        // Get the file input element
        var theFile = 
            document.getElementById('theFile');
  
        // Define a function to be called
        // when the input is focused
        function initialize() {
            document.body.onfocus = checkIt;
            console.log('initializing');
        }
  
        // Define a function to check if
        // the user failed to upload file
        function checkIt() {
  
            // Check if the number of files
            // is not zero
            if (theFile.value.length) {
                alert('Files Loaded');
            }
              
            // Alert the user if the number
            // of file is zero
            else {
                alert('Cancel clicked');
            }
            document.body.onfocus = null;
            console.log('checked');
        }        
    </script>
</body>
  
</html>

chevron_right


Output:

  • File input for the user to select a file: 
     

  • Alert when the user has failed to input the file:
     

  • On successful upload, the file name appears as intended:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.