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

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.
<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 elementvar theFile = document.getElementById('theFile');  // Define a function to be called// when the input is focusedfunction initialize() {    document.body.onfocus = checkIt;    console.log('initializing');}      // Define a function to check if// the user failed to upload filefunction 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.
<!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>
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:
HTML-Misc
JavaScript-Misc
Picked
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?