POST immediately after select a file

Question

I have the following HTML code

<form action="/script/upload_key.py" method="POST" enctype="multipart/form-data"> 
    Key filename: <input name="file_1" type="file"> 
    <input name="submit" type="submit"> 
</form> 

which gives me the following stuff.

I was wondering

1. How I can use JavaScript, to eliminate the need of Submit button. That's mean, once I Choose File, the selected file will be uploaded immediately?
2. How can I make sure the field to display selected file name is long enough, so that ... will not be shown?

Answer 1

To submit it immediately, just do this:

<input name="file_1" type="file" onchange="this.form.submit();"> 

If you are using JQuery:

$("input[name='file_1']").change(function() { this.form.submit(); }); 

About your other questions:

1) There are many methods out there... for example:

http://valums.com/ajax-upload/

http://www.webtoolkit.info/ajax-file-upload.html

(and many more. Just google for: "Ajax file upload" or "iframe file upload")

2) Don't worry about the width of the field. As you don't know how long can it be the path, it would never be long enough (i think). Also browsers may display it very different. For example Safari or Chrome show it very different from Firefox or IE. Just use the default length or the one that looks better with your design.

Answer 2

In case you don't want or need to submit the whole form on file input select, then you can do this to send only the file:

$(document).ready(function (e) {  	$("#uploadImage").on('change',(function(e) {  		// append file input to form data  		var fileInput = document.getElementById('uploadImage');  		var file = fileInput.files[0];  		var formData = new FormData();  		formData.append('uploadImage', file);    		$.ajax({  			url: "ajaxupload.php",  			type: "POST",  			data: formData,  			contentType: false,  			cache: false,  			processData:false,  			success: function(data) {  				if(data=='invalid') {  					// invalid file format.  					$("#err").html("Invalid File !").fadeIn();  				}    				else {  					// view uploaded file.  					$("#preview").html(data).fadeIn();  					$("#form")[0].reset();  				}  			},  			error: function(e) {  				$("#err").html(e).fadeIn();  			}  		});  	}));  });

<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">    <input id="uploadImage" type="file" accept="image/*" name="uploadImage">    <input class="btn btn-success" type="submit" value="Upload">        <div id="err"></div>  </form>

So first you get the input file element with getElementById(), then you append to FormData, then send the FormData as data in your ajax call. Do the server side upload processing in ajaxupload.php.

Answer 3

For the first one:

<input name="file_1" type="file" onchange="this.form.submit()">

I'm not sure about making the field wide enough though. Sometimes CSS is crippled on file upload fields to prevent exploits.