Handle Cancel Click on File Input
Ever Tried capturing cancel event on Browse file input type in HTML, tbh there is no direct way to do so But there is a workaround adding a bit of javascript. We can play with onfocus event of the BODY element. Example -> HTML
|
1 |
<input type='file' id='theFile' onclick="initialize()" /> |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var theFile = document.getElementById('theFile'); function initialize() { document.body.onfocus = checkIt; console.log('initializing'); } function checkIt() { if(theFile.value.length) alert('Files Loaded'); else alert('Cancel clicked'); document.body.onfocus = null; console.log('checked'); } |
See it working here
