-3

Eu preciso fazer o botão ficar desabilitado e só funcionar quando o campo file estiver preenchido, tentei o required mas não obtive sucesso. o código está em js, react... o código em questão é esse:

 <input
                  className=" bg-blue h-full text-center rounded-md relative m-0 block w-full min-w-0 flex-auto border border-solid border-neutral-300 dark:border-neutral-600 bg-clip-padding py-[0.32rem] px-3 text-base font-normal text-neutral-700 dark:text-neutral-200 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 dark:file:bg-neutral-700 file:px-3 file:py-[0.32rem] file:text-neutral-700 dark:file:text-neutral-100 file:transition file:duration-150 file:ease-in-out file:[margin-inline-end:0.75rem] file:[border-inline-end-width:1px] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-[0_0_0_1px] focus:shadow-primary focus:outline-none cursor-pointer"
                  type="file"
                  id="formFile"
                  required
                />
                <button
                  onClick={() => alert("Arquivo submetido com sucesso!")}
                  value="Exibir Alert"
                  for="formFile"
                  className="bg-[#465EFF] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full border-2 border-white"
                >

1 Resposta 1

-1

você pode fazer uma função onchange aplicando-a ao elemento input file, e em seguida usando o atributo files em cima do elemento verificando o tamanho do mesmo, se for iguala azero quer dizer que não possui nenhum arquivo/imagem selecionada.

https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#getting_information_about_selected_files

function verificaInput(elemento){
    elemento.files.length > 0 ? document.getElementById('enviar').disabled = false :  document.getElementById('enviar').disabled = true
}
<input type="file" id="input" onchange="verificaInput(this)">
<br>
<br>
<button id="enviar" disabled>Enviar</button>

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 .