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

Last Updated : 11 Jun, 2020

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.

html

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

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

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

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.

HTML

<!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>