O elemento input[type=”file”]

Quando seus usuários precisam fazer upload de alguma coisa no seu sistema, é a ele que você recorre.

O básico

O elemento é bem simples:

<input type="file">

Mas se você quer o mínimo de acessibilidade vai precisar adicionar mais um pouco de html:

<form method="post" action="upload.php" formenctype="multipart/form-data">
<label for="upload">
Upload your picture:
</label>
<input type="file" name="upload" id="upload">
</form>

Como o input radio e outros tipos de inputs do HTML, o estilo desse input é definido pelo browser.

Limitações

Você pode limitar as opções do usuário setando diferentes MIME type no atributo accept, você também pode usar o * para permitir arquivos de um tipo em particular.

<input type="file" accept="image/*" name="upload" id="upload">
IOS suporta o * mas não suporta arquivos específicos como por exemplo image/png.

Tudo que não for um arquivo do tipo imagem vai ser ignorado ou nem aparecera quando o dialog para escolher os arquivos abrir.

Você também pode aceitar múltiplos arquivos utilizando o atributo booleano multiple.

<input type="file" multiple accept="image/*" name="upload" id="upload">

Customização

Por padrão o elemento não é naaada customizável, mas como tudo nessa vida existe um workaround:

Com javascript:

Com JS você pode fazer coisas bem legais como preview da imagem que o usuário está subindo ou até mostrar quanto falta para o upload acabar e muito mais.

Exemplo de preview da imagem selecionada

Com CSS

Para estilizar com CSS é quase a mesma coisa que acontece com radio e checkbox você esconde o elemento em si e faz todo o estilo com a label.

Exemplo de input file estilizado com CSS

Lembrando que tudo isso é muito legal mas não se esqueça da acessibilidade. Todos devem ter acesso as informações do seu site independente das limitações ❤