184

I have a simple file upload form. How do I make it submit automatically when a file has been selected? I don't want the user to have to click the Submit button.

6
  • 9
    What if the user selects the wrong file? IMO, you should leave it to the user to choose when to submit. Sep 6, 2011 at 14:58
  • 3
    @Tyler Most people will select the correct file and I am trying to reduce UX friction. For those people who select the wrong file, after it has been uploaded they may choose to delete it.
    – ram1
    Sep 6, 2011 at 18:02
  • 4
    "most people" make smart decisions, but most people aren't.
    – Phix
    Aug 16, 2013 at 6:31
  • 2
    I agree with @TylerCrompton, users will make the dumbest mistakes and blame you for it, you could add an undo after the submission.
    – Ross Keddy
    Oct 19, 2016 at 19:06
  • 3
    the best answer is the simplest answer stackoverflow.com/a/25893747/1536309 Jan 24, 2019 at 20:17

14 Answers 14

226

You can simply call your form's submit method in the onchange event of your file input.

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

http://jsfiddle.net/cwvc4/73/

2
  • 4
    This works in Safari where as the jQuery solution doesn't seem to work. Strange? Feb 14, 2014 at 12:08
  • 2
    @henrywright: Yes. In jQuery the Submit() call triggers the jQuery submit event, but does not fire the underlying form submit(). You can of course use $('form')[0].submit() to hit the DOM element with jQuery Sep 20, 2016 at 11:48
111

Just tell the file-input to automatically submit the form on any change:

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>

This solution works like this:

  • onchange makes the input element execute the following script, whenever the value is modified
  • form references the form, that this input element is part of
  • submit() causes the form to send all data to the URL, as specified in action

Advantages of this solution:

  • Works without ids. It makes life easier, if you have several forms in one html page.
  • Native javascript, no jQuery or similar required.
  • The code is inside the html-tags. If you inspect the html, you will see it's behavior right away.
0
58

Using jQuery:

$('#file').change(function() {
  $('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="file" id="file" value="Go" />
</form>

3
  • also, the same question was on stackoverflow: stackoverflow.com/questions/4704154/…
    – Samich
    Sep 6, 2011 at 14:57
  • Does this approach work in Safari? I'm not sure. I've tested Chrome, IE and FF which all work. Feb 14, 2014 at 11:55
  • @ErdalG: Working jQuery version added below. It avoids this problem. Sep 20, 2016 at 11:51
39

JavaScript with onchange event:

<form action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>

jQuery .change() and .submit():

$('#fileInput').change(function() {
  $('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
     <input type="file" id="fileInput">
</form>

1
  • add a comment if you do down vote to make clear what's wrong or what should be improved. Oct 14, 2016 at 21:17
12

The shortest solution is

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
2
  • 3
    How about onchange="this.form.submit()"
    – vikkee
    Aug 26, 2016 at 7:24
  • 3
    How about onchange="form.submit()"? :)
    – slartidan
    Jan 31, 2017 at 15:16
8
+50
<form id="thisForm" enctype='multipart/form-data'>    
  <input type="file" name="file" id="file">
</form>

<script>
$(document).on('ready', function(){
  $('#file').on('change', function(){
    $('#thisForm').submit();
  });
});
</script>
6

This is my image upload solution, when user selected the file.

HTML part:

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

JavaScript:

document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
    var upload = document.getElementById('img_input');
    var image = upload.files[0];
    $.ajax({
      url:"/foo/bar/uploadPic",
      type: "POST",
      data: new FormData($('#img_form')[0]),
      contentType:false,
      cache: false,
      processData:false,
      success:function (msg) {}
      });
};
5

If you already using jQuery simple:

<input type="file" onChange="$(this).closest('form').submit()"/>
3

Try bellow code with jquery :

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
$(document).ready(function(){
    $('#myForm').on('change', "input#MyFile", function (e) {
        e.preventDefault();
        $("#myForm").submit();
    });
});
</script>
<body>
    <div id="content">
        <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
            <input type="file" id="MyFile" value="Upload" />
        </form>
    </div>
</body>
</html>
1
  • +1 because this is the only method I found that enabled me to catch the submit event with jquery. The other methods seem to bypass the submit event so I can not do checks on the form or submit with Ajax when using them. Thanks Mar 14, 2017 at 16:56
2

For those who are using .NET WebForms a full page submit may not be desired. Instead, use the same onchange idea to have javascript click a hidden button (e.g. <asp:Button...) and the hidden button can take of the rest. Make sure you are doing a display: none; on the button and not Visible="false".

2

HTML

<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>

JAVASCRIPT PURE

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>
2

You can put this code to make your code work with just single line of code

<input type="file" onchange="javascript:this.form.submit()">

This will upload the file on server without clicking on submit button

2
<form action="http://example.com">
    <input type="file" onchange="Submit()" />
</form>

 <script>
     // it will submit form 0 or you have to select particular form
     document.getElementsByTagName("form")[0].submit();       
 </script>
0

$('#file').change(function() {
  $('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="file" id="file" value="Go" />
</form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.