Atributo accept do HTML

O atributo accept do HTML informa ao navegador quais tipos de arquivo um controle <input type="file"> deve sugerir no seletor de arquivos do sistema operacional. É uma dica para a interface do usuário, não um recurso de segurança ou validação: ele facilita a localização dos arquivos corretos quando o usuário clica no botão de upload.

Esta página aborda os valores que accept aceita (tipos MIME, extensões de arquivo e curingas), como combiná-los, como o valor se comporta nos diferentes navegadores, como accept se combina com o atributo multiple e a codificação de formulários, e por que você ainda deve validar os uploads no servidor.

O accept só pode ser usado no elemento <input>, e somente quando seu type for file. Em qualquer outro tipo de input, ele é ignorado.

Como o navegador usa o valor

Quando o usuário abre o seletor de arquivos, o navegador usa accept para pré-filtrar quais arquivos são exibidos ou selecionáveis. O comportamento exato depende de cada navegador e sistema operacional:

• Chrome / Edge adicionam uma entrada no menu suspenso de tipos de arquivo que corresponde à sua lista accept e a selecionam por padrão, mas ainda permitem que o usuário mude para "Todos os arquivos".
• Firefox filtra a lista de forma similar e, em algumas plataformas, também oferece um fallback de "Todos os arquivos".
• Safari respeita o valor, mas o texto e o rigor do filtro diferem do Chrome.

Em todos os navegadores, o usuário pode contornar o filtro e selecionar um arquivo que não corresponda. O valor de accept nunca bloqueia o envio do formulário e nunca é aplicado de forma obrigatória. Trate-o puramente como uma conveniência.

Sintaxe

<input type="file" accept="value">

O valor é uma lista separada por vírgulas de um ou mais especificadores de tipo de arquivo. (Tabelas de referência mais antigas às vezes mostram as opções separadas por | — esse pipe significa "escolha dentre esses tipos de valor", ele não é válido dentro do próprio atributo.) Cada especificador é um dos seguintes:

É possível misturar qualquer um deles em uma única lista, separados por vírgulas.

Exemplos

Aceitar qualquer imagem

<form action="/form/submit" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*" />
  <input type="submit" value="Upload" />
</form>

Aceitar tipos MIME específicos

Use uma lista separada por vírgulas para permitir apenas determinados formatos — aqui PNG e JPEG, mas não GIF ou WebP:

<input type="file" name="photo" accept="image/png,image/jpeg" />

Aceitar por extensão de arquivo

As extensões são práticas para formatos cujo tipo MIME é verboso ou inconsistente entre sistemas, como documentos de escritório:

<input type="file" name="document" accept=".pdf,.doc,.docx" />

Aceitar áudio ou vídeo

<!-- any audio file -->
<input type="file" name="track" accept="audio/*" />

<!-- any video file -->
<input type="file" name="clip" accept="video/*" />

Combinar tipos MIME com extensões

Uma única lista accept pode conter ambas as formas ao mesmo tempo. Isso é útil quando um curinga é muito abrangente, mas alguns tipos de arquivo são mais fáceis de expressar como extensão:

<input type="file" name="upload" accept="image/png,image/jpeg,.pdf,.docx" />

Trabalhando com multiple e codificação de formulários

O accept é quase sempre usado em conjunto com outros dois recursos de inputs de arquivo:

• O atributo multiple permite que o usuário selecione mais de um arquivo por vez no seletor. Funciona da mesma forma com accept: o filtro se aplica a todos os arquivos que o usuário adiciona.
• enctype="multipart/form-data" é obrigatório no elemento <form> para que os arquivos sejam realmente enviados. Uma codificação de formulário normal transmite apenas o nome do arquivo, não seus bytes.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="gallery">Choose images:</label>
  <input type="file" id="gallery" name="gallery" accept="image/*" multiple />
  <input type="submit" value="Upload" />
</form>

Para mais informações sobre como criar formulários de upload, consulte a tag HTML <form>, a tag HTML <input> e o guia de Formulários HTML.

Segurança: nunca confie no accept

O atributo accept não é um mecanismo de validação. Depender dele para fins de segurança é inseguro por dois motivos:

• Falsificação de extensão. O nome de um arquivo (e, portanto, sua extensão) não diz nada sobre seu conteúdo real. Qualquer pessoa pode renomear malware.exe para photo.png. O filtro accept analisa apenas a extensão e o tipo MIME informado, ambos controlados pelo cliente.
• Detecção de tipo MIME. O tipo MIME que o navegador informa para um arquivo enviado é derivado do nome do arquivo ou do sistema operacional e pode ser falsificado. O servidor deve inspecionar os bytes reais do arquivo para saber o que ele realmente é.

Como o usuário pode contornar o filtro do seletor completamente, todo upload deve ser validado no servidor: verifique o tipo de arquivo real a partir de seu conteúdo (não de seu nome), aplique um limite de tamanho, armazene-o fora da raiz web ou em um caminho seguro, e nunca execute arquivos enviados. Use accept apenas para melhorar a experiência do usuário, nunca como uma barreira de segurança.

Prática