How to open window to select file after pressing the Submit button?

Question

I am creating an application and I need the customer to send in a <form> a file for the server.

On my HTML page I have two buttons, download and upload, and I would like to have the client select the file to be sent only when clicking the upload button. Example:

document.getElementsByTagName("form")[0].onsubmit = function() {
    // Pede para o usuário selecionar o arquivo e depois prossegue
    // com a requisição ao servidor.
}

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="fileUploaded" hidden="true"/>
    <input type="submit" value="Enviar arquivo"/>
</form>

The idea is to do the same thing to send a video to youtube. After clicking the button, the user selects the file and the page sends the form. How can I do this with pure Javascript ?

Answer 1

To perform a function when selecting a file, simply use the event onchange which will be executed only when the user changes the file name.

To perform a request without the user pressing the button submit, just use the form function requestSubmit that will send the request.

See this simple example below:

const msg = document.getElementById("msg");
const file = document.getElementById("fileUploaded");

file.onchange = function() {
    msg.innerHTML = "Arquivo enviado.";
}

<input type="file" id="fileUploaded"/>
<div id="msg" style="padding-top: 30px; color: #f00;"></div>

Answer 2

The best way for you to do that would be to reverse your logic. Load the page with the visible upload and as required

<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="fileUploaded" required /> <input type="submit" value="Enviar arquivo"/> </form>

You can also load the page with the button submit disabled and enable it if your upload is completed.

Don’t forget to validate the type and file size in your backend as well.

Answer 3

let fileInput = document.getElementById("fileInput");
let form1 = document.getElementById("form1");

//No evento submit.
form1.addEventListener('submit', (e) => {

  //Verifica se há algum arquivo selecionado.
  if (fileInput.value == "") {
    e.preventDefault(); //Cancela o evento.
    fileInput.click(); //Chama a janela de seleção de arquivo.
  }
});

//Após selecionar e dar ok 
fileInput.addEventListener('input', (e) => {
  form1.requestSubmit(); // faz uma nova solicitação de envio de formulário.
});

<form action="/upload" id="form1" method="post" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="fileUploaded" hidden="true" />
  <input type="submit" value="Enviar arquivo" />
</form>

The logic is simple instead of making the form submission request directly at the event form1.submit, have the request made only after the event fileInput.change.

At the event form1.submit initially do a check to see if fileInput has some selected file reading its property value because if no file is still selected, the string will be empty.

If there are any files selected submit proceeds normally by uploading the file.

If no file is selected the event submit is aborted via preventDefault() and the event fileInput.click then it is fired displaying the file selection window. In case the user selects a file and click ok, the event fileInput.change will be triggered by re-sending the form through the method requestSubmit().