How to fire select same file event from a file input element

Quite a fringe case but might come useful in other scenarios.

Issue

We have a file input element. We process the selected file client-side by listening for the change event and running a handler function.
We want to run the handler function every time a file is selected. If user has selected a file, then triggers the file input and selects the same file, we want the function to run. Currently it's not possible with the change event. There is no "select file" event.

Solution

Reset the input value on click event.

<input type="file" accept="image/png, image/jpeg" />
 
<script>
  // const inputEl = ...
 
  inputEl.addEventListener("click", (event) => {
    event.target.value = null;
  });
 
  inputEl.addEventListener("change", (event) => {
    // ... handle select file
  });
</script>

You can do this with any framework/library component as long as it uses <input type="file"> element and you can access its events.``

warning
[!WARNING] This only makes sense when storing the file value in a separate variable (through handleSelectFile in my example). Else—if you read from the input element value—you'll lose the existing file when user clicks the input but does not select a file.

Answer recapped from these threads:

(still amused at the thought of other people also coming across this weird case 😆)