HTML <input type='file'> File Selection Event

Javascript Problem Overview

Let's say we have this code:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

which results in this:

image showing browse and upload button

When the user clicks the 'Browse...' button, a file search dialog box is opened:

image showing a file search dialog box with a file selected

The user will select the file either by double-clicking the file or by clicking the 'Open' button .

Is there a Javascript Event that I can use to be notified after after the file is selected?

Javascript Solutions

Solution 1 - Javascript

Listen to the change event.

input.onchange = function(e) { 
  ..
};

Solution 2 - Javascript

When you have to reload the file, you can erase the value of input. Next time you add a file, 'on change' event will trigger.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

Solution 3 - Javascript

jQuery way:

$('input[name=myInputName]').change(function(ev) {
  
    // your code
});

Solution 4 - Javascript

That's the way I did it with pure JS:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  warning.classList -= "warn";
  submit.disabled = false;
});

#warning {
    text-align: center;
	transition: 1s all;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

Solution 5 - Javascript

The Change event gets called even if you click on cancel..

Solution 6 - Javascript

Though it is an old question, it is still a valid one.

Expected behavior:

Show selected file name after upload.
Do not do anything if the user clicks Cancel.
Show the file name even when the user selects the same file.

Code with a demonstration:

<!DOCTYPE html>
<html>

<head>
  <title>File upload event</title>
</head>

<body>
  <form action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="userFile" id="userFile"><br>
    <input type="submit" name="upload_btn" value="upload">
  </form>
  <script type="text/javascript">
    document.getElementById("userFile").onchange = function(e) {
      alert(this.value);
      this.value = null;
    }
  </script>
</body>

</html>

Explanation:

The onchange event handler is used to handle any change in file selection event.
The onchange event is triggered only when the value of an element is changed. So, when we select the same file using the input field the event will not be triggered. To overcome this, I set this.value = null; at the end of the onchange event function. It sets the file path of the selected file to null. Thus, the onchange event is triggered even at the time of the same file selection.

Content Type	Original Author	Original Content on Stackoverflow
Question	Moon	View Question on Stackoverflow
Solution 1 - Javascript	Anurag	View Answer on Stackoverflow
Solution 2 - Javascript	Clem	View Answer on Stackoverflow
Solution 3 - Javascript	Zanon	View Answer on Stackoverflow
Solution 4 - Javascript	RegarBoy	View Answer on Stackoverflow
Solution 5 - Javascript	anthony	View Answer on Stackoverflow
Solution 6 - Javascript	arsho	View Answer on Stackoverflow