Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
197
rated 0 times [  198] [ 1]  / answers: 1 / hits: 119162  / 9 Years ago, mon, january 18, 2016, 12:00:00

I am working with a standard file input for uploads, and I am looking for a way to attach a function to an event when the user clicks/hits enter on the cancel button (or escapes out from) the choose file dialog.



I can't find any events that work across all browsers and platforms consistently.



I've read the answers to this question: Capturing cancel event on input type=file but they don't work, as the change event doesn't fire in most browsers on canceling out of the choose file dialog.



I'm looking for a pure js solution, but open to jquery solutions as well.



Anyone solve this problem successfully?


More From » jquery

 Answers
15

A bit of research indicates that there is no way to detect when Cancel is selected in the File Selection dialog window. You can use onchange or onblur to check if files have been selected or if something has been added to the input value.



This could look like: https://jsfiddle.net/Twisty/j18td9cs/



HTML



<form>
Select File:
<input type=file name=test1 id=testFile />
<button type=reset id=pseudoCancel>
Cancel
</button>
</form>


JavaScript



var inputElement = document.getElementById(testFile);
var cancelButton = document.getElementById(pseudoCancel);
var numFiles = 0;

inputElement.onclick = function(event) {
var target = event.target || event.srcElement;
console.log(target, clicked.);
console.log(event);
if (target.value.length == 0) {
console.log(Suspect Cancel was hit, no files selected.);
cancelButton.onclick();
} else {
console.log(File selected: , target.value);
numFiles = target.files.length;
}
}

inputElement.onchange = function(event) {
var target = event.target || event.srcElement;
console.log(target, changed.);
console.log(event);
if (target.value.length == 0) {
console.log(Suspect Cancel was hit, no files selected.);
if (numFiles == target.files.length) {
cancelButton.onclick();
}
} else {
console.log(File selected: , target.value);
numFiles = target.files.length;
}
}

inputElement.onblur = function(event) {
var target = event.target || event.srcElement;
console.log(target, changed.);
console.log(event);
if (target.value.length == 0) {
console.log(Suspect Cancel was hit, no files selected.);
if (numFiles == target.files.length) {
cancelButton.onclick();
}
} else {
console.log(File selected: , target.value);
numFiles = target.files.length;
}
}


cancelButton.onclick = function(event) {
console.log(Pseudo Cancel button clicked.);
}


I suggest making your own cancel or reset button that resets the form or clears the value from the input.


[#63671] Saturday, January 16, 2016, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elishaannac

Total Points: 28
Total Questions: 97
Total Answers: 101

Location: Samoa
Member since Mon, Nov 8, 2021
3 Years ago
elishaannac questions
Sun, Dec 5, 21, 00:00, 3 Years ago
Mon, Jun 14, 21, 00:00, 3 Years ago
Mon, Jul 22, 19, 00:00, 5 Years ago
Mon, Jul 8, 19, 00:00, 5 Years ago
;