1

Estou criando uma aplicação e preciso que o cliente envie em um <form> um arquivo para o servidor.

Na minha página HTML eu possuo dois botões, download e upload, e eu gostaria de fazer com que o cliente selecionasse o arquivo a ser enviado somente quando clicar no botão de upload. Exemplo:

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>

A ideia é fazer a mesma coisa de enviar um vídeo para o youtube. Após clicar no botão, o usuário seleciona o arquivo e a página envia o formulário. Como posso fazer isso com JavaScript puro ?

1
  • Acredito que não seja possivel fazer isso sem php ou node js.
    – user187043
    Commented 27/04/2020 às 17:20

3 Respostas 3

1

Para executar uma função ao selecionar um arquivo, basta utilizar o evento onchange que será executado somente quando o usuário trocar o nome do arquivo.

Para realizar uma requisição sem que o usuário aperte no botão submit, basta utilizar a função do formulário requestSubmit que enviará a requisição.

Veja este simples exemplo abaixo:

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>

0
0

A melhor maneira de você fazer isso seria inverter a sua lógica. Carregue a página com o upload visível e como required

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

Você também pode carregar a página com o botão submit desabilitado e habilitá-lo caso seu input de upload esteja preenchido.

Não esqueça de validar o tipo e tamanho de arquivo no seu backend também.

0

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>

A lógica é simples ao invés de fazer a solicitação de envio de formulário diretamente no evento form1.submit, faça com que a solicitação só seja feita após o evento fileInput.change.

No evento form1.submit inicialmente faça uma verificação para saber se fileInput possui algum arquivo selecionado lendo a sua propriedade value pois se nenhum arquivo ainda estiver selecionado, a string será vazia.

Caso haja algum arquivo selecionado submit prossegue normalmente upando o arquivo.

Caso não haja arquivo selecionado o evento submit é abortado via preventDefault() e o evento fileInput.click então é disparado exibindo a janela de seleção de arquivos. Caso o usuário selecione um arquivo e clique ok, o evento fileInput.change será disparado refazendo o envio do formulário através do método requestSubmit().

2
  • Ficou muito bom. Só achei a resposta um pouco confuso no início. Consegui entender melhor olhando o código. Commented 28/04/2020 às 4:11
  • @JeanExtreme002, e clarifiquei a resposta espero que tenha ficado do seu agrado. Commented 28/04/2020 às 4:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .