All geek questions in one place

Cancel event on input type = "file"

I work with a standard input file for loading, and I am looking for a way to attach a function to an event when the user clicks / hits, enters the “cancel” button (or leaves it) to select a file dialog.

I can not find any events that work in all browsers and platforms sequentially.

I read the answers to this question: Capture event cancellation by input type = file , but they do not work, since the change event does not work in most browsers when the file selection dialog is canceled.

I am looking for a clean js solution, but also opening up jQuery solutions.

Does anyone successfully solve this problem?

+5
source share
2 answers

A little research shows that it is impossible to detect when “Cancel” is selected in the “File Selection” dialog box. You can use onchange or onblur to check if files were selected or something added to the value input.

It might look like this: 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, which resets the form or clears the value from the input.

+4
source

I had a problem when I pressed the cancel button in the input type = "file" element and wanted the function to do nothing. if something was selected and I clicked the "Open" button, then I wanted my function to do something. The example shows only the method, I deleted what I do with it after it opens. I placed warnings only so that you can see that there is no file name that returns from the dialog box when you click cancel. Here is the method I use, it is simple, but it works.

  function openFileOnClick(){ document.getElementById("fileSelector").value = ""; document.getElementById("fileSelector").files.length = 0; document.getElementById("fileSelector").click(); if(document.getElementById("fileSelector").files.length >= 1){ alert(document.getElementById("fileSelector").value); //Do something } else{ alert(document.getElementById("fileSelector").value); //Cancel button has been called. } } 
 <html> <head> </head> <body> <input type="file" id="fileSelector" name="fileSelector" value="" style="display:none;" /> <input type="button" value="Open File" name="openFile" onclick="openFileOnClick();" /> </body> </html>
-1
source

Source: https://habr.com/ru/post/1240850/

More articles:


All Articles