How do I submit a "file" input without submit button using JavaScript?

Question

There is a way to automatically submit a form without clicking to a "submit" button?

I have a form with one "file" input. I would submit the form after the user have selected one file.

score 73 · Accepted Answer · edited Jan 16 '20 at 09:53

73

yes, you can use the form.submit() function. Add an onchange listener on the file input and link it to the form.submit() function, like so:

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

edited Jan 16 '20 at 09:53

k.vincent

3,391
6
33
65

answered Dec 14 '09 at 23:15

Marius

55,927
31
124
146

score 8 · Answer 2 · answered Dec 14 '09 at 23:15

Yes, you can add the following to the onchange event of the file input:

<input type='file' .... onchange='this.form.submit();'>

this submits the form right after the user has picked a file. However, the user can't correct a mistaken selection before submitting - be sure to check whether this is really wise.

score 3 · Answer 3 · edited Sep 27 '13 at 10:04

3

This solution works for me.

<form enctype="multipart/form-data" method="POST" action="/upload">
  <input id="myfilefield" type="file" name="file">
  <input type="submit">
</form>

document.getElementById('myfilefield').onchange = function() {
  this.form.submit();
};

By the way, you don't need to use flash. Gmail do it by XHR Level 2.

edited Sep 27 '13 at 10:04

laalto

144,748
64
275
293

answered Sep 27 '13 at 09:43

cwtuan

1,495
1
16
15

score 2 · Answer 4 · answered Dec 14 '09 at 23:13

2

I don't believe you can do this. Browsers are very, very strict about what you can do to file upload fields, because of the potential for abuse. If the user accidentally selects a private file, they wouldn't want it to immediately start uploading that file to a random server.

answered Dec 14 '09 at 23:13

ceejayoz

171,474
40
284
355

not true, I just tested the code in my answer, and it works (at least in Firefox). – Marius Dec 14 '09 at 23:17
Checked with IE, Edge, Chrome, Firefox - none will accept this, while `onchange='alert("test");'` is fine. Believe, this does not work for enctype multipart/form-data - which is required to have a file-upload work. – dognose Nov 30 '16 at 20:58
1

edit: http://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript That's the point. don't name the submit button `submit`, else it fails with console error `submit is not a function`. name it different, then it works. – dognose Nov 30 '16 at 21:02

score 0 · Answer 5 · answered Dec 14 '09 at 23:16

I'm not sure what the restrictions are with doing this in an HTML form.

You can, however, do it with Flash. Gmail does it - when I click "Attach a file", I get prompted with a file browse dialog, and when I OK that dialog the upload begins immediately, and also gives me a progress bar.

Googling for "Flash uploader" will give you many options, but I don't have experience with any of them.

How do I submit a "file" input without submit button using JavaScript?

5 Answers5

Linked