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