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.
HTML Code: The following code is defines in the HTML of the page.
- The property value type=”file” tells that the type of input the user enters is a file.
- The property value onclick=”initialize()” is used to specify the function call when the user has clicked on the input.
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.
- 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:
- How to reset selected file with input tag file type in Angular 9?
- How to detect when an @Input() value changes in Angular?
- How to get file input by selected file name without path using jQuery ?
- How to detect the duplication of values of input fields ?
- How to detect value change on hidden input field in JQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.