Input File upload success?

Question

I have a quite complex form that has one "file" input, such as:

<input type="file" />

Is it possible to trigger some kind of "upload successful" with JS, so after user uploads the file the whole form submits itself?

Answer 1

You can upload your files asynchronously (if you want you may upload multiple files). So for example:

<input type="file" class="js-file-upload" multiple>

After creating input tag, you can listen to change event

$(".js-file-upload").on("change", function(e){
 var files = e.target.files;
 // your own logic to filter files etc.
 // upload your file
});

After all this you can listen to upload finish event (to submit after loading all files for example). Javascript XMLHttpRequest object provides two events: upload.progress and load. So use it ))

Pseudocode from my project:

file.on("upload.progress", function(e){
  //value show progress
  var value = Math.floor(e.loaded / e.total * 100);
});
file.on("load", function(response){ //logic });

Answer 2

I would recommend jQuery File Upload for this purpose. The done callback informs the client that the file was uploaded successfully. Then you would be able to submit the corresponding form. There are many more useful callbacks (e.g. a failure callback).