21.02.2025

Restrição de Tipos de Arquivos em HTML: Apenas Imagens

Resposta Rápida

Se você quer limitar o upload de arquivos apenas a imagens, utilize o atributo accept no elemento <input type="file">. Defina-o como image/* para permitir todos os tipos de arquivos de imagem ou especifique formatos particulares, como image/png, image/jpeg.

<!-- Somente envios de imagens são permitidos aqui! -->
<input type="file" accept="image/png, image/jpeg">

Nota: O atributo accept restringe a seleção de arquivos a imagens na caixa de diálogo de upload de arquivos do navegador.

Segurança em Múltiplas Camadas: Cliente e Servidor

Você não pode depender apenas do atributo accept, pois restrições do lado do cliente podem ser facilmente contornadas. Aumente a segurança verificando o tipo MIME no lado do servidor após o upload. Isso garantirá que os arquivos sejam realmente imagens.

Feedback Visual Instantâneo com a API FileReader

Os usuários apreciam um feedback visual imediato. A API FileReader permite que você leia instantaneamente o conteúdo das imagens selecionadas e exiba uma prévia. Essa abordagem possibilita a verificação dos arquivos antes da submissão.

// A API FileReader é uma ferramenta essencial para prévias de imagens.
let reader = new FileReader();

Envio de Múltiplas Imagens

Para permitir o envio de várias imagens ao mesmo tempo, utilize o atributo multiple junto com accept:

<!-- Deixe todas as imagens se juntarem à sua celebração! -->
<input type="file" accept="image/*" multiple>

Garantindo Limitações de Tipo MIME e Tamanho de Arquivo

Além de verificar o tipo MIME, analise o conteúdo real do arquivo no lado do cliente usando JavaScript para manipular dados binários. Além disso, monitore o tamanho do arquivo para evitar sobrecarregar o servidor.

// Tamanho importa! Isso é especialmente importante ao enviar arquivos.
if (file.size > allowedSize) { /* tratar exceção */ }

Visualização

O comportamento do atributo accept é semelhante a um segurança em uma balada:

Entrada para a balada: 🚪  
Segurança (Input HTML): 🛑🧔‍♂️  
Convidados permitidos (Arquivos): 🖼️🎨📸  

<input type="file" accept="image/*">

Ele só deixa entrar aqueles que estão "vestidos" como imagens:

Antes: [📄, 🖼️, 🎵, 📸, 📊]  
Depois: [🖼️, 📸]  

Assim, o atributo accept age como uma senha de entrada: apenas imagens permitidas! 🚫👔🚫👗

Tratamento de Erros com Educação

Uma experiência positiva para o usuário inclui um tratamento cuidadoso de erros e feedback claro quando um arquivo incorreto é selecionado. Por exemplo, você pode redefinir o campo de entrada em caso de erro.

// Arquivo incorreto selecionado. Vamos tentar novamente.
input.value = "";

Segurança Adicional: Verificações do Lado do Servidor

Para aumentar a confiabilidade do sistema, realize verificações adicionais do tipo MIME no servidor. Isso ajudará a garantir que o arquivo enviado corresponda ao tipo esperado.

Recursos Úteis

1. <input type="file"> - HTML: Linguagem de Marcação de Hipertexto | MDN - Informações detalhadas sobre o atributo 'accept' para elementos de entrada de arquivo.
2. Lendo Arquivos em JavaScript | Artigos | web.dev - Guia para trabalhar com a API File.
3. FileReader - API Web | MDN - Descrição e exemplos de uso da API FileReader.
4. Atributo accept do Input HTML - Exemplos de utilização do atributo 'accept'.
5. Arrastar e Soltar Arquivos - API Web | MDN - Gerenciando arrastar e soltar arquivos para uploads.
6. Upload de Arquivos Sem Restrições | OWASP Foundation - Informações sobre segurança no upload de arquivos e melhores práticas.

Video

Navigation