Como validar tamanho de arquivo com JavaScript

Neste artigo você vai aprender a como validar tamanho de arquivo com JavaScript, utilizando apenas recursos nativos da linguagem

Fala programador(a), beleza? Bora aprender mais sobre validação de arquivos com JavaScript!

É importante a validação de tamanho, pois podemos lotar nosso servidor desnecessarimente com imagens muito grande

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Esta validação pode ser disparada no evento de change do input de arquivos

Lá pegaremos o arquivo e detectaremos o valor da propriedade size

Como o tamanho é de dado em bytes, vou converter para mb, isso deixa nosso código mais simples

Veja o código necessário:

const input = document.querySelector("#image-input")

input.addEventListener("change", function(e) {

  const fileSize = e.target.files[0].size / 1024 / 1024; // para mb
  
  if (fileSize > 3) {
    console.log("O arquivo tem mais de 3mb!")
  }
  
})

Primeiramente selecionamos o input e depois inserimos o evento nele

No evento é verificado o tamanho, que podemo ser encontrado na propriedade size

Depois no if é feita a impressão da mensagem de validação

Você deve trocar os valores para que o seu projeto seja atendido

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você aprendeu a como validar tamanho de arquivo com JavaScript

Utilizamos o evento change no input, que detecta quando o usuário adiciona o arquivo

Depois bastou verificar a propriedade de tamanho do mesmo, que é a size

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!