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" 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.

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.

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 ❤