21.02.2025

Restringindo Tipos de Arquivo na Entrada: Apenas PDF e XLS

Resumo Rápido

Para garantir que um elemento de upload de arquivo aceite apenas os formatos PDF e XLS, você deve especificar os MIME types correspondentes no atributo accept, conforme mostrado abaixo:

<input type="file" accept=".pdf, .xls, .xlsx" />

Este código é baseado nas extensões de arquivo, o que proporciona maior compatibilidade entre diversos navegadores, suportando tanto o formato XLS quanto o mais moderno XLSX. É importante notar que você deve implementar uma validação do lado do servidor para garantir confiabilidade e segurança.

Uma Abordagem em Múltiplas Camadas: Da Validação no Lado do Cliente à Validação no Lado do Servidor

Embora o atributo accept permita que você filtre arquivos no lado do cliente, a validação do lado do servidor é um procedimento obrigatório, pois as restrições do lado do cliente podem ser contornadas. Vamos explorar como garantir a segurança do processo de upload de arquivos:

Validação do Lado do Cliente Usando JavaScript

O envio do formulário pode ser bloqueado até que a extensão do arquivo seja verificada usando JavaScript, como ilustrado no exemplo abaixo:

// Impedir o upload de qualquer coisa que não seja PDF ou XLS
document.querySelector('input[type="file"]').onchange = function(e) {
  var fileName = e.target.files[0].name;
  var extension = fileName.split('.').pop().toLowerCase();
  // Apenas PDF e Excel são permitidos!
  if (extension !== "pdf" && extension !== "xls" && extension !== "xlsx") {
    alert("Apenas arquivos PDF ou Excel são permitidos. Por favor, tente novamente!");
    this.value = ''; // Limpar o campo de entrada em caso de um arquivo inválido
  }
};

Este script oferece um retorno instantâneo para os usuários, melhorando sua interação com o sistema e reduzindo requisições desnecessárias ao servidor.

Validação do Lado do Servidor

Uma proteção confiável contra arquivos incorretos ou maliciosos é alcançada verificando o MIME type e a extensão do arquivo no servidor:

// Linha de defesa contra arquivos PDF e XLS inválidos
$fileType = $_FILES['uploadedFile']['type'];
if (in_array($fileType, ['application/pdf', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])) {
    // Permitir o upload do arquivo
} else {
    // Retornar um erro
    echo "Tipo de arquivo não suportado! Por favor, envie um arquivo nos formatos PDF ou XLS.";
}

A implementação em PHP verifica se o MIME type do arquivo é permitido, filtrando tentativas de upload indesejadas.

Melhorando a Experiência do Usuário: Recomendações Profissionais

Para criar uma interface clara e amigável, considere as seguintes dicas:

Mensagens de Erro Claras e Específicas

Forneça aos usuários instruções claras sobre os formatos de arquivo aceitáveis, caso um arquivo incorreto seja carregado. Isso reduzirá a frustração e os erros dos usuários durante os uploads, ajudando aqueles que podem não ter um conhecimento técnico profundo.

Compatibilidade entre Diferentes Navegadores

O atributo accept se comporta de maneira diferente dependendo do navegador. Testes entre diversos navegadores garantem uma experiência do usuário consistente.

Visualização

Imagine o campo de entrada do arquivo como um porteiro que verifica a validade dos documentos e permite apenas os formatos PDF e Excel:

Instrução para o porteiro: "Apenas permita [📄PDF, 📊XLS, 📈XLSX]!"

<input type="file" accept=".pdf, .xls, .xlsx">

Documentos enviados: [📄, 📊, 🖼️, 🎼, 📜]  
Após a verificação: [📄, 📊]

Essencialmente, o campo de entrada com o atributo accept atua como um porteiro, aceitando apenas certos tipos de arquivos, melhorando assim a experiência do usuário e orientando a seleção na direção certa.

Mergulhando nos MIME Types

Cada arquivo possui um MIME type exclusivo - um identificador digital que informa aos navegadores e servidores seu tipo:

• Arquivos com .pdf tipicamente têm o tipo application/pdf.
• Arquivos com .xls (planilhas do Excel 97-2003) têm o tipo application/vnd.ms-excel.
• Arquivos com .xlsx (planilhas do Excel) usam application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.

Verificar MIME types é uma parte importante da lógica de validação do lado do servidor para fins de segurança.

Medidas de Segurança

No servidor, implemente verificações de segurança adicionais para evitar que arquivos maliciosos sejam enviados disfarçados de '.pdf' ou '.xls'. Preste atenção nos cabeçalhos de arquivo e nas estruturas de dados que se conformam ao formato indicado.

Recursos Úteis

1. O atributo type do elemento input no W3Schools — princípios essenciais para trabalhar com o elemento <input>.
2. Discussão sobre o atributo accept do elemento input no Stack Overflow — várias opiniões e abordagens sobre o uso de accept.
3. O elemento input na Mozilla Developer Network — um guia abrangente para <input>.
4. <input type="file"> no MDN com o atributo accept — informações sobre entrada de arquivos e a especificação de tipos aceitáveis.
5. Validação de tipo de arquivo com JavaScript — guia do GeeksforGeeks sobre validação de arquivos do lado do cliente.
6. O atributo accept do elemento input no W3Schools — uma visão geral do uso de accept.
7. Padrão HTML para uploads de arquivo — descrição dos padrões W3C e a implementação de upload de arquivos.

Video

Navigation