Input type = "file", clearing the file after clicking cancel in chrome
This is the answer to your question that you cannot even find when the cancel button is pressed:
How to determine when clicking on a file is pressed on a file input?
https://jsfiddle.net/dqL97q0b/1/
Here is the job, so Chrome cannot delete the existing user file when clicking cancel.
Code Notes: This is done by the Dom Element clone when the user opens a file selection, if a file is already selected. Then, if the user clicks cancel in chrome, he starts the Event Listener application, and the value is "", so in this particular case, I now delete the empty file selection and restore the clone.
Note: for each selection of Dom Element files, you need a unique identifier so that the clone can be saved and retrieved correctly.
Note. Most of the code only logs in to show how everything works, in particular, I would like to emphasize this if you use the built-in event listeners in the Dom element, for example onclick = "fileClicked (event)" , then you do not need to re-attach event listeners to the clone.
<!doctype html><html><head></head><body> <h2>Fix for Chrome Removing File when 'cancel' clicked</h2> Upload Image: <input id="imageUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> <br/><br/> <label for="videoUpload">Upload Video:</label> <input id="videoUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> <br/><br/> <div id="log"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> //This is All Just For Logging: var debug = true;//true: add debug logs when cloning var evenMoreListeners = true;//demonstrat re-attaching javascript Event Listeners (Inline Event Listeners don't need to be re-attached) if (evenMoreListeners) { var allFleChoosers = $("input[type='file']"); addEventListenersTo(allFleChoosers); function addEventListenersTo(fileChooser) { fileChooser.change(function (event) { console.log("file( #" + event.target.id + " ) : " + event.target.value.split("\\").pop()) }); fileChooser.click(function (event) { console.log("open( #" + event.target.id + " )") }); } } var clone = {}; // FileClicked() function fileClicked(event) { var fileElement = event.target; if (fileElement.value != "") { if (debug) { console.log("Clone( #" + fileElement.id + " ) : " + fileElement.value.split("\\").pop()) } clone[fileElement.id] = $(fileElement).clone(); //'Saving Clone' } //What ever else you want to do when File Chooser Clicked } // FileChanged() function fileChanged(event) { var fileElement = event.target; if (fileElement.value == "") { if (debug) { console.log("Restore( #" + fileElement.id + " ) : " + clone[fileElement.id].val().split("\\").pop()) } clone[fileElement.id].insertBefore(fileElement); //'Restoring Clone' $(fileElement).remove(); //'Removing Original' if (evenMoreListeners) { addEventListenersTo(clone[fileElement.id]) }//If Needed Re-attach additional Event Listeners } //What ever else you want to do when File Chooser Changed } </script> </body></html> A simple but effective solution: keep the link to the file in a variable. Each time an input change event occurs, you check:
if(input.files[0]) // truthy, falsey { var file = input.files[0]; } So file will contain the last selected file, and when the user opens the dialog, but cancels the link to the file, it will not be changed and will contain the previously selected file.