BaseFileItem

Mostra um arquivo anexado: memória de cálculo, planilha, fotos da obra. Diz o tipo, o nome e o tamanho, acompanha o envio e deixa remover.

memoria-calculo-medicao-29.pdf2,4 MB · Paulo Ramos · 20/10

planilha-vencedora-cf001.xlsx812 KB · 18/09/2026

fotos-pavimento-2.jpg8,1 MB

40%

Envio de fotos-pavimento-2.jpg

Uso

• Use numa lista de anexos, abaixo da área de envio ou na aba de anexos de uma medição.
• O nome é o do arquivo, com a extensão. Não encurte: nomes longos quebram linha.
• meta completa o tamanho com quem enviou e quando: "Paulo Ramos · 20/10".
• Com href, o nome vira um link que abre o arquivo. Enquanto envia, com erro ou desabilitado, o nome é só texto.
• Com removable, aparece o botão de remover. Ele emite remove; quem tira o arquivo da lista é a tela. Durante o envio, a tela também cancela a requisição ao receber remove; o botão continua se chamando "Remover" e o nome do arquivo.
• Vários arquivos ficam numa lista (<ul>), um BaseFileItem por <li>.

Tipos de arquivo

memoria-calculo.pdf2,4 MB

fachada-norte.jpg3 MB

cronograma-fisico-financeiro.xlsx512 KB

relatorio-fiscalizacao.docx192 KB

planta-baixa-pavimento-2.dwg12 MB

projeto-completo.zip50 MB

LEIAME120 B

Extensões	Ícone e cor
pdf	PDF, vermelho
jpg, jpeg, png, gif, webp, heic, heif, bmp, tif, tiff, svg	Imagem, azul
xls, xlsx, xlsm, ods, csv	Planilha, verde
doc, docx, odt, rtf; txt, md, xml, json; ppt, pptx, odp	Documento, texto ou apresentação, azul de seleção
dwg, dxf, dwf, rvt, ifc, skp	Projeto, neutro
zip, rar, 7z, tar, gz	Compactado, neutro
mp4, mov, avi, mkv, webm	Vídeo, neutro
Outras ou sem extensão	Arquivo genérico, neutro

A cor nunca vem sozinha: cada tipo tem um ícone de forma diferente, e a extensão está no nome.

Situações

fotos-pavimento-2.jpg8,1 MB

40%

Envio de fotos-pavimento-2.jpg

fotos-pavimento-3.jpg8,1 MB

Enviando

Envio de fotos-pavimento-3.jpg

memoria-calculo-completa.pdf25 MB

Erro: O arquivo passa de 20 MB. Divida em partes menores.

memoria-calculo-28.pdf2,3 MB

Situação	Como
Enviado	Padrão. Nome, tamanho e, com href, link para abrir
Enviando	uploading com progress de 0 a 100. Sem progress, a barra anima e diz "Enviando"
Erro	invalid com invalid-text, que diz o que deu errado e o que fazer. Sem texto, aparece "Não foi possível enviar o arquivo." O erro vence o envio
Desabilitado	disabled: o botão de remover não responde e o nome perde o link, como num formulário já enviado

Tamanhos

memoria-calculo-29.pdf2,4 MB

memoria-calculo-29.pdf2,4 MB

Use sm em painéis laterais e tabelas, onde a lista divide espaço com outros dados.

Tamanho do arquivo

O tamanho vem em bytes (bytes) e aparece em português, na base 1024, como os limites de envio costumam ser escritos: 120 B, 812 KB, 2,4 MB, 3,3 GB. KB não tem casa decimal; MB e acima têm uma.

Estilo

Propriedade	Token
Fundo	--tj-layer-01; enviando --tj-layer-02; desabilitado --tj-field-disabled
Borda	--tj-border-subtle-02 (1 px); erro --tj-support-error-text
Raio	--tj-radius-md (8 px); ícone sm com --tj-radius-sm
Espaço interno	--tj-space-3 (12 px); sm com --tj-space-2 (8 px)
Ícone do tipo	Caixa de 36 px (sm: --tj-icon-lg, 24 px) com glifo --tj-icon-md, 20 px (sm: --tj-icon-sm). O protótipo v3 usa 18 px; aqui o glifo segue a escala de ícones do sistema. PDF --tj-support-error-subtle e -text; imagem --tj-support-info-*; planilha --tj-support-success-*; documentos --tj-layer-selected-01 com --tj-link-primary; os demais --tj-layer-accent-01 com --tj-text-secondary
Nome	--tj-text-md (o protótipo herda o tamanho do texto; aqui ele é fixo para a linha não mudar com o contêiner), --tj-weight-medium, --tj-text-primary; link --tj-link-primary, hover e pressionado --tj-link-primary-hover; sm com --tj-text-sm
Tamanho e meta	--tj-text-xs, --tj-text-helper, números tabulares
Erro	--tj-support-error-text, --tj-text-xs, --tj-weight-medium, com ícone
Barra de envio	BaseProgress sm
Foco	Contorno sólido de 2 px --tj-border-interactive, afastado 2 px, no link e no botão. O --tj-ring translúcido fica abaixo de 3:1 sobre o fundo branco da linha
Movimento	Borda com --tj-duration-fast-02 e --tj-easing-standard; sem transição com movimento reduzido
Alto contraste	Borda CanvasText; com erro, um contorno interno de 1 px reforça a borda sem mover a linha. Foco com contorno Highlight

Código

<ul class="list-unstyled d-grid gap-2">
  <li v-for="anexo in anexos" :key="anexo.id">
    <BaseFileItem
      :name="anexo.nome"
      :bytes="anexo.bytes"
      :href="anexo.url"
      :uploading="anexo.enviando"
      :progress="anexo.percentual"
      :invalid="Boolean(anexo.erro)"
      :invalid-text="anexo.erro"
      removable
      @remove="remover(anexo)"
    />
  </li>
</ul>

Propriedade	Tipo	Padrão	Descrição
name	string	—	Nome do arquivo com a extensão; obrigatório. A extensão escolhe o ícone
bytes	number	—	Tamanho em bytes, mostrado como "812 KB" ou "2,4 MB"
meta	string	—	Texto depois do tamanho, como "Paulo Ramos · 20/10"
href	string	—	Transforma o nome em link para abrir o arquivo; ignorado enviando, com erro ou desabilitado
removable	boolean	false	Mostra o botão de remover
disabled	boolean	false	Desabilita o botão de remover e tira o link
uploading	boolean	false	Mostra a barra de envio
progress	number	—	Percentual do envio, de 0 a 100; sem ele, a barra é indeterminada
invalid	boolean	false	O envio ou a validação falhou
invalidText	string	"Não foi possível enviar o arquivo."	O que deu errado e o que fazer
size	'sm' | 'md'	'md'	Densidade da linha

Evento: remove, sem dados, ao clicar no botão de remover.

Acessibilidade

• O botão de remover é um <button> nativo com aria-label "Remover " e o nome do arquivo, para cada botão de uma lista ter um nome diferente. Enter e Espaço acionam.
• Com erro, o botão de remover é descrito pela mensagem de erro (aria-describedby): quem chega nele pelo Tab ouve o que deu errado.
• Depois de remover, a linha some e o foco se perderia. A tela deve levar o foco para o próximo arquivo, para o anterior ou, se a lista ficar vazia, para o botão de enviar.
• O ícone do tipo é decorativo (aria-hidden); o tipo está na extensão do nome.
• A barra de envio é um BaseProgress com o nome "Envio de " e o arquivo, escondido na tela e lido pelo leitor de tela, com valor em aria-valuenow. Sem progress, não há valor e o leitor de tela ouve "Enviando".
• Uma região aria-live="polite" anuncia só as mudanças de situação de uma linha que já está na tela, com o nome do arquivo: "fotos-pavimento-2.jpg: envio concluído", "memoria.pdf: Erro. O arquivo passa de 20 MB." Uma nova mensagem de erro na mesma linha também é anunciada. Linhas que já nascem enviadas não são lidas; linhas que já nascem com erro (um arquivo recusado ao ser solto) são anunciadas logo depois de aparecer. O avanço do percentual não é anunciado, para não interromper.
• O erro tem ícone, texto e borda; a cor nunca é o único sinal. A mensagem começa com "Erro: " escondido na tela, para quem lê a página com o leitor de tela e para a descrição do botão de remover.
• O link e o botão mostram um contorno de foco sólido, com 3:1 sobre o fundo da linha, que continua visível no alto contraste do Windows. O link tem sublinhado, além da cor.
• Nomes longos quebram linha em vez de serem cortados, então o nome inteiro continua legível com zoom de 400%.
• Testado com axe nas situações e combinações listadas no teste: enviado, com link e botão, enviando, com erro, desabilitado (também com erro e enviando), nos dois tamanhos, e depois de um anúncio. O contraste vem dos tokens de função, que mantêm AA nos dois temas; o jsdom não calcula cores.