Skip to main content

File Uploader

Visão geral#

O componente file uploader permite que os usuários importem arquivos e acompanhem o seu progresso de carregamento. Para isto, é possível especificar a quantidade, formato e tamanho aceitos.

Quando usar#

Utilize-o para viabilizar o envio de arquivos, como por exemplo, um documento no preenchimento de um formulário.

Anatomia#

Estruturalmente, o componente file uploader pode ser composto por: um label, text support, button e upload content, conforme imagem abaixo:

Imagem representando o componente file uploader contendo os elementos citados acima um abaixo do outro, tendo o info bar com o valor de 33 por cento e o componente progress bar com um terço preenchido.
  1. Label: elemento do tipo texto para informar sobre o contexto de importação do arquivo;
  2. Text support: elemento do tipo texto para auxiliar nas especificações aceitas do arquivo;
  3. Button: elemento do tipo button para acionar a abertura do ficheiro no dispositivo para a seleção de arquivo(s);
  4. Upload content: um container que compõe elementos para exibir o nome e status da importação do arquivo selecionado (mais detalhes na seção à seguir).

O upload content só é exibido após a seleção de ao menos um arquivo.

Upload content#

Estruturalmente, o upload content pode ser composto por: um file name, close, info bar e o componente progress bar, conforme imagem abaixo:

Imagem representando a estrutura do upload content com os elementos citados acima circundados por um container com plano de fundo preenchido na cor cinza claro e bordas levemente arredondadas.
  1. File name: elemento do tipo texto, que assume o nome e a extensão do arquivo selecionado;
  2. Close: elemento do tipo icon, que funciona como botão para acionar o fechamento do arquivo selecionado ou carregado;
  3. Info bar: texto e valor percentual ou mensagem de erro (dependendo dos estados do componente), que informam sobre o status de importação;
  4. Progress bar: elemento do tipo progress bar que informa visualmente o status de importação.

A estrutura do upload content pode variar de acordo com o estado do componente file uploader. Saiba mais na seção de estados.

Comportamento#

Quando a utilização do componente permitir importar vários arquivos, o componente button deve alterar seu rótulo para o plural.

Exemplo: Add file -> Add files.

Além disso, a estrutura do upload content é exibida somente à partir de um arquivo selecionado e pode variar sua composição de acordo com os estados do componente.

Estados#

O componente file uploader, diverge as características na estrutura do upload content em seus quatro estados de interação, conforme descrições à seguir:

Normal#

A estrutura contém todos os elementos de sua anatomia, tendo o elemento info bar com o texto "Carregando ..." e o valor percentual de acordo com a importação, além do componente progress bar em seu estado normal, conforme imagem abaixo:

Imagem representando a estrutura do uploader content conforme descrição acima.
Success#

A estrutura contém todos os elementos de sua anatomia, tendo o elemento info bar com o texto "Concluído" e o valor percentual em 100%, além do componente progress bar em seu estado success, conforme imagem abaixo:

Imagem representando a estrutura do uploader content conforme descrição acima.
Error#

A estrutura não contém apenas o componente progress bar de sua anatomia, tendo o elemento info bar acrescido de um ícone de exclamação, com a mensagem de erro e seu container todos em vermelho, conforme imagem abaixo:

Imagem representando a estrutura do uploader content conforme descrição acima.
Uploaded#

A estrutura contém apenas os elementos info bar e close com seu container mais compacto, conforme imagem abaixo:

Imagem representando a estrutura do uploader content conforme descrição acima.

Boas práticas#

Foram estruturados os padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência aos usuários. Por isso, é muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em consideração os seguintes critérios:

Fazer#

  • Solicite a importação apenas de arquivos que sejam críticos para a entrega do sua solução/serviço;
  • Defina rótulos informativos e instrutivos;
  • Forneça feedback significativo e mensagens de erro quando ocorrerem:
    • Evite jargões técnicos e tente fornecer instruções resolutivas sobre como corrigir o erro.

Não fazer#

  • Evite a utilização em modais quando muitos arquivos forem enviados, devido ao empilhamento vertical;
  • Não substitua rótulos por ícones nos botões, pois pode gerar dificuldade no entendimento.

Interação#

A ordem de foco deve acontecer em sequência lógica. Como por exemplo, quando não há um elemento selecionado, o foco deve mover-se para o botão do componente (Focus Order):

Ao pressionar a tecla Tab, o primeiro elemento é focado:

Imagem representando o componente file uploader com foco no elemento button.

Quando em foco, os elementos interativos pode ser acionados usando as teclas de Space ou Enter. (Keyboard Interaction).

Imagem representando o componente file uploader com foco no elemento close.

Sequência de foco:

Button -> 2º Close

Acessibilidade tratada no componente#

O componente file uploader foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1.

Algumas diretrizes de acessibilidade já são tratadas no componente internamente e não devem ser alteradas por quem utilizar. São elas:

  • Cores não devem ser utilizadas como única maneira de transmitir conteúdo ou distinguir elementos visuais (1.4.1: Use of Color (A));
  • Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 4.5:1 (1.4.3: Contrast (Minimum) (A)(A));
  • Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 7:1 (1.4.6: Contrast (Enhanced) (AAA));
  • Sempre que uma mensagem de erro for exibida, ela deve identificar claramente qual é o elemento que gerou o erro de forma visual e audível (3.3.1: Error Identification (A)):
    • Exemplo: mudança de cor no elemento + ícone de alerta + uma mensagem em texto.

      Nota: verificar junto com critério 3.3.3: Error Suggestion (AA);

  • Qualquer tipo de mensagem que é resultado de uma ação ou que informa o andamento de um processo e que seja relevante para a pessoa, deve ser transmitida sem que ocorra uma mudança de contexto (foco) na tela (4.1.3: Status Messages (A)(A)).
Observação

O comportamento Drag and Drop será contemplado na próxima onda do componente.