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

Question

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.

What if the user selects the wrong file? IMO, you should leave it to the user to choose when to submit. — Tyler Crompton, Sep 06 '11 at 14:58
@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 06 '11 at 18:02
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 '16 at 19:06
when the auto-submit is successful via the on change event, how to you then delete the upload lets say the user now decides not to post submit the form — okandas, Aug 22 '18 at 12:53
the best answer is the simplest answer https://stackoverflow.com/a/25893747/1536309 — Blair Anderson, Jan 24 '19 at 20:17

Alex Turpin · Accepted Answer · 2013-07-18T20:43:54.220

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/

edited Jul 18 '13 at 20:43

answered Sep 06 '11 at 14:57

Alex Turpin

46,743
23
113
145

4

This works in Safari where as the jQuery solution doesn't seem to work. Strange? – henrywright Feb 14 '14 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 – iCollect.it Ltd Sep 20 '16 at 11:48

slartidan · Answer 2 · 2020-04-09T04:14:05.407

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.

score 58 · Answer 3 · edited Mar 15 '19 at 15:16

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>

edited Mar 15 '19 at 15:16

double-beep

5,031
17
33
41

answered Sep 06 '11 at 14:55

Samich

29,157
6
68
77

also, the same question was on stackoverflow: http://stackoverflow.com/questions/4704154/jquery-automatic-submit-form-type-file – Samich Sep 06 '11 at 14:57
Does this approach work in Safari? I'm not sure. I've tested Chrome, IE and FF which all work. – henrywright Feb 14 '14 at 11:55
@ErdalG: Working jQuery version added below. It avoids this problem. – iCollect.it Ltd Sep 20 '16 at 11:51

Alex Kulinkovich · Answer 4 · 2019-06-10T14:35:33.543

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>

edited Jun 10 '19 at 14:35

answered Aug 16 '13 at 06:08

Alex Kulinkovich

4,408
15
46
50

add a comment if you do down vote to make clear what's wrong or what should be improved. – Alex Kulinkovich Oct 14 '16 at 21:17

score 12 · Answer 5 · edited May 20 '16 at 15:28

12

The shortest solution is

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

edited May 20 '16 at 15:28

The Codesee

3,714
5
38
78

answered Jan 06 '14 at 13:45

xboz

174
1
8

3

How about `onchange="this.form.submit()"` – vikkee Aug 26 '16 at 07:24
3

How about `onchange="form.submit()"`? :) – slartidan Jan 31 '17 at 15:16

score 8 · Answer 6 · answered Oct 21 '16 at 02:30

8

<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>

answered Oct 21 '16 at 02:30

Dhurba Baral

559
5
12

score 6 · Answer 7 · answered Sep 30 '17 at 18:31

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) {}
      });
};

score 5 · Answer 8 · answered Mar 21 '17 at 08:13

5

If you already using jQuery simple:

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

answered Mar 21 '17 at 08:13

Sojtin

2,714
2
18
32

score 3 · Answer 9 · answered Oct 19 '16 at 14:13

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 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 — user1404617, Mar 14 '17 at 16:56

score 2 · Answer 10 · answered Oct 04 '13 at 14:43

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".

score 2 · Answer 11 · answered Nov 06 '14 at 18:06

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>

score 2 · Answer 12 · edited Oct 21 '16 at 11:51

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>

edited Oct 21 '16 at 11:51

krlzlx

5,752
14
47
55

answered Oct 21 '16 at 10:02

Anant Dabhi

10,864
3
31
49

score 2 · Answer 13 · answered Oct 21 '16 at 10:30

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

answered Oct 21 '16 at 10:30

Amit Kumar

318
2
14

score 0 · Answer 14 · answered Jul 20 '22 at 09:31

$('#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>

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

14 Answers14

Linked

Related