Detect when a user chooses a file using a file input

user_366252 0
Viewed 16039

How can I detect when a user has chosen which file to upload using a html file input. That way I can submit the form automatically.

html-input jquery javascript
3 Answers

A vanilla JavaScript way to detect a change in the file input:

var fileInput = document.getElementById('inputfileID')
fileInput.addEventListener('change', function () {
  // Called when files change. You can for example:
  // - Access the selected files
  var singleFile = fileInput.files[0]
  // - Submit the form
  var formEl = document.getElementById('formID')
  formEl.submit()
}, false);

Just to mention: the attribute false means to not use capture i.e. false means that relevant change listeners in the DOM tree are executed in bottom-up order. It is the default value but you should always give the attribute to maximise compatibility.

See also a SO answer about change event, MDN docs for addEventListener, and a SO answer about form submission.

user_6385460
Related