How do I auto-submit an upload form when a file is selected?

javascript

event-listener

form-submission

vanilla-javascript

byAnton Shumikhin·Nov 5, 2024

Create an auto-fulfilling prophecy by auto-submitting a file when selected, attaching an onchange event to your HTML file input leading to form submission:

<form id="uploadForm" method="post" enctype="multipart/form-data">
  <input type="file" onchange="this.form.submit()">
</form>

This line of code uses this.form.submit() directly in the onchange attribute, fast-forwarding to form submission. So, the file picker swiftly becomes the delivery person too!

Elaborating the concept

When JavaScript is your loyal sidekick

If HTML feels lonely, you can summon JavaScript to add a pinch of zest. Set the event listener to the file input, which acts as the whistle-blower for the form submission.

// When the file changes its status from single to selected... 
document.getElementById("file").onchange = function() {
  // ...the form can't wait and leaps to submit itself, good ol' eager beaver!
  document.getElementById("uploadForm").submit();
};

Note: Don't forget to label <input> and <form> with id attributes file and uploadForm.

Trusting our friend jQuery

In a world where jQuery isn't considered an alien language, things get cryptically straightforward:

$('#file').change(function() {
  // As soon as the file changes, the form rushes to the server, faster than a peregrine falcon!
  $('#uploadForm').submit();
});

No matter how alluring jQuery's wrapper is, strive to return to the purity of Vanilla JavaScript when possible.

Pre-submission checklist

Before opening the court to accept form submissions, double-check the action attribute; it should point to the courtroom where your server deals with the uploaded file.

Understanding common scenarios

Compatibility mode ON

Just like a disagreeing couple, JavaScript or jQuery might clash with other scripts. Ensure they’re in friendly terms or you'll be left with unhappy code.

Form with multiple inputs

In a scenario where the form has multiple inputs, restrict the auto-submit only to the file input. This ensures harmony and avoids submitting too soon...like proposing on the first date!