Uploader / AnexoUpload

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-stylesAinda não disponível
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O AnexoUpload permite que o usuário envie um ou mais arquivos para o sistema. Ele oferece suporte para a funcionalidade de arrastar e soltar (drag & drop) e seleção manual, informando previamente as restrições de formato e tamanho para garantir a integridade dos dados.

Diretrizes de Comportamento

Área de Drop: Deve ser visualmente distinta (borda tracejada) para indicar que é uma zona interativa. Use a instrução: Arraste os arquivos aqui.
Ação Manual (Botão): O botão deve ser claro e direto. Use Caixa de Título.
- Exemplo: Selecione os Arquivos.
Informação de Suporte: Use textos curtos em Caixa de Sentença para conectar as ações.
- Exemplo: ou se preferir.
Formatos Suportados: Exiba claramente as extensões permitidas no rodapé do componente para evitar frustração do usuário ao tentar subir arquivos inválidos.
Múltiplos Arquivos: Se o componente permitir mais de um arquivo, a interface deve sinalizar que a seleção múltipla está ativa.

Sugestão de Padronização de Nome

O nome ideal para o Design System é: File Uploader .

Por que?
- Figma: “Uploader” é um termo padrão da indústria para essa área de drag & drop.
- Angular/React: Resolve a diferença entre AnexoUpload e Uploader.
- Contexto: O termo “Anexo” descreve o status do arquivo após o envio (ele vira um AnexoItem), enquanto “Uploader” descreve o componente que realiza a ação. -
- Sugestão de alteração de AnexoItem → FileItem para ter a relação com o FileUploader

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

Angular (mds-angular)

`[mdsDnd]`

Outputs

Output	Payload	Descrição
`fileDropped`	`FileList`	—

`mds-anexo-upload`

Permita o usuário a realizar o upload de arquivos

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`supportedMimeTypes`	`string[]`	`[]`	Mime dos tipos de arquivos suportados
`supportedFileTypes`	`string[]`	`[]`	Extensão dos tipos de arquivos suportados
`multiple`	`boolean`	`false`	Habilita seleção de multiplos arquivos
`files`	`UploadFile[] \| null`	`null`	Arquivos para atualizar processamento

Outputs

Output	Payload	Descrição
`onFilesSelected`	`UploadFile[]`	Emitido ao selecionar os arquivos, retorna os arquivos selecionados

Uploader / AnexoUpload — Figma (Design System 2.0) ↗

Componentes relacionados

AnexoItem