How to make upload button submit files without second submit button php Symfony3

Question

I have upload button. Currently when it is clicked there is a new button save showing which submits the form with the data. Is it possible after upload is clicked to open a tab in which to select files and after files are selected if Open is clicked to submit the form without the need of a second button? Imagine I have this code

<form action="/upload" method="post">
  <input type="file" name="uploadButton" value="Upload Images"/>
</form>

Is it possible for this button to submit the form and send the data without second button save . I am using Symfony 3.3 and twig templates. I know javascript if it can help. Thank you in advance.

Answer 1

Add an event listener to automatically submit the form when input changes:

HTML:

<form id="myform" action="/upload" method="post">
  <input id="myinput" type="file" name="uploadButton" value="Upload Images"/>
</form>

JavaScript:

var form = document.getElementById('myform');
var input = document.getElementById('myinput');

var change_running = false;    
input.addEventListener('change', function(){
    if(!change_running){
        setTimeout(function(){
            change_running = true;
            form.submit();
            change_running = false;     
        }, 300);
    }
});