Contexto
Enviar um arquivo envolve escolher um item fora da interface, conferir restrições, aguardar processamento e entender se a operação terminou. Quando o componente não informa formatos, limites, progresso ou erros, a pessoa pode selecionar o arquivo errado, repetir a ação ou perder o trabalho.
Uma boa experiência de upload torna os requisitos visíveis antes da seleção, oferece botão acessível, permite arrastar e soltar como alternativa, mostra o estado de cada arquivo e explica como recuperar falhas.
Apresente uma ação clara para selecionar arquivos e informe antes da escolha os formatos aceitos, o tamanho máximo, a quantidade permitida, se o envio é obrigatório e a finalidade do arquivo quando houver dúvida.
Use o campo nativo de arquivo como base. O atributo accept pode orientar o seletor do sistema, mas não substitui a validação no servidor.
Depois da seleção, mostre o nome do arquivo, o tamanho e, quando útil, uma miniatura ou prévia. Permita remover ou substituir cada item sem reiniciar todo o formulário.
Em uploads assíncronos, mostre estados distintos para carregando, concluído, rejeitado, interrompido e com erro. Se possível, ofereça tentar novamente ou selecionar outro arquivo.
Quando vários arquivos forem aceitos, apresente o resultado de cada um separadamente. Um arquivo inválido não deve esconder o estado dos demais.
Porque isso importa?
A pessoa precisa saber o que pode enviar, o que está acontecendo e como recuperar uma falha. A ausência dessas informações transforma uma tarefa simples em tentativa e erro.
Design systems como Carbon, Polaris, USWDS e GOV.BR documentam padrões recorrentes: botão de seleção, área opcional de arrastar e soltar, lista de arquivos, feedback de processamento, remoção e mensagens de erro.
Esses exemplos mostram soluções de implementação, não uma regra universal. A escolha deve considerar o tipo de arquivo, o tamanho, a conexão, o dispositivo, a importância da tarefa e o nível de sensibilidade dos dados.
Quando usar?
- Quando documentos forem necessários para concluir a tarefa.
- Quando a pessoa puder enviar um ou mais arquivos.
- Quando o processamento demorar.
- Quando formatos ou tamanhos precisarem ser limitados.
- Quando arquivos puderem falhar individualmente.
- Quando arrastar e soltar trouxer conveniência sem ser a única opção.
Quando evitar?
- Quando o documento não for realmente necessário.
- Quando o upload for apenas uma preferência interna da equipe.
- Quando a interface aceitar arquivos sem explicar as restrições.
- Quando o sistema não mostrar progresso ou resultado.
- Quando vários arquivos forem enviados dentro de um modal estreito.
- Quando arrastar e soltar for a única forma de selecionar o arquivo.
Recomendações
Faça
- Explique formatos e limites.
- Use um botão claro.
- Mostre os arquivos selecionados.
- Indique o progresso.
- Permita remover e substituir.
- Explique cada erro.
- Ofereça nova tentativa.
- Valide também no servidor.
Evite
- Não exija arrastar e soltar.
- Não esconda os limites.
- Não use feedback genérico.
- Não bloqueie a tela sem necessidade.
- Não apague arquivos válidos.
- Não aceite tipos apenas pelo nome.
- Não dependa só do navegador.
