How to detect input type=file "change" for the same file?

When you need the same file, again and again...

How to milk the same cow, more than once

Several methods exist to clear the input value, working consistently throughout frameworks and vanilla JavaScript:

// Plain JavaScript
// Protip: No frameworks were hurt in the making of this code.
inputFile.onclick = () => inputFile.value = '';

// jQuery
// jQuery, as old as time but still getting work done.
$('#fileInput').on('click', () => $('#fileInput').prop('value', ''));

// React
// In React, we trust.
const handleFileClick = (event) => {
  event.target.value = null;
  // Refresh component rendering after state changes
}


.attr vs .prop, the jQuery conundrum

In jQuery, swapping .attr('value', '') with .prop('value', '') offers more foolproof results. The latter directly modifies the property and proves more reliable:

// Spin that jQuery magic
$('#fileInput').on('click', () => $(this).prop('value', ''));

// This looks harmless, but it's NOT
$('#fileInput').on('click', () => $(this).attr('value', ''));


jsFiddle, your playground for curiosity

Fire up the online code editor jsFiddle and you can test these behaviors in real-time. Innovation is just one link away.

Fore-warnings and Fore-arming

Although the method is straightforward, remember:

• Test extensively on different browsers for a streak of consistency.
• Handle click events tied to the file input with caution.
• Alert! Browsers' security constraints may sometimes lead to varying behavior.

TypeScript wisdom

Ensuring type safety with TypeScript

When using TypeScript, you must incorporate type safety when clearing the input value:

const handleFileClick = (event: React.MouseEvent<HTMLInputElement>) => {
  const input = event.target as HTMLInputElement;
  // Sure input.value exists, my type-induced phantom pain has been averted
  input.value = '';
};


Here, we ensure that event.target is seen as an HTMLInputElement, which lets us safely modify input.value.

More edge cases, because life is edgy

The case of uncertain clicks

A user might click on the file input but cancel without selecting a file. In this case, it is critical to verify file selection:

inputFile.addEventListener('change', (event) => {
  if (!event.target?.files?.length) {
    // It’s lonely here with no files
    return;
  }
  
  // Do your file processing magic…
  event.target.value = null; // Reset the value for next file selection
});


The case of accidentally choosing your ex (file)

For applications that don't require processing the same file repeatedly, you might need additional logic to prevent accidental reselection:

let lastFile;

inputFile.addEventListener('change', (event) => {
  const currentFile = event.target.files[0];
  
  if (currentFile === lastFile) {
    // Oh no, it's the dreaded file reselection!
    console.log('File reselection detected.');
    return;
  }
  
  lastFile = currentFile;
  // Go forth and process file
});
