Upload
Visão Geral
Design System
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
accept
| Atributo | accept |
| Descrição | Tipos de arquivo permitidos (ex.: 'image/*'). |
| Tipo | string |
| Valor padrão | '' |
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
disabled
| Atributo | disabled |
| Descrição | Desabilita a interação com o componente. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam disabled. |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | Rótulo exibido acima do botão de upload. |
| Tipo | string |
| Valor padrão | 'Envio de arquivo' |
multiple
| Atributo | multiple |
| Descrição | Indica se o componente permite a seleção de múltiplos arquivos. Quando definido como true, o usuário pode selecionar mais de um arquivo para upload. |
| Tipo | boolean |
| Valor padrão | false |
name
| Atributo | name |
| Descrição | Nome do campo enviado no formulário. |
| Tipo | string |
| Valor padrão | --- |
required
| Atributo | required |
| Descrição | Se verdadeiro, o input de upload é obrigatório antes que o formulário possa ser enviado. |
| Tipo | boolean |
| Valor padrão | false |
state
| Atributo | state |
| Descrição | Estado visual: 'info', 'warning', 'danger' ou 'success'. |
| Tipo | "danger" | "info" | "success" | "warning" |
| Valor padrão | --- |
uploadFiles
| Atributo | upload-files |
| Descrição | Lista de arquivos já enviados (para edição ou pré-visualização). Pode ser uma string JSON ou um array de objetos IUploadFile. |
| Tipo | IUploadFile[] | string |
| Valor padrão | [] |
Slots
| Nome | Descrição |
|---|---|
"default" | Texto personalizado para o botão de upload. Se não fornecido, será exibido "Selecione o arquivo" como texto padrão. Use este slot para personalizar o texto do botão de acordo com o contexto do upload, por exemplo: "Anexar documentos", "Enviar imagens", etc. |
"label" | Rótulo customizado do upload. Quando utilizado, a prop label é ignorada. |
"upload-list" | Permite customizar a área de listagem de arquivos. Se utilizado, substitui a lista padrão gerada pelo componente. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brRemove | Evento emitido quando um arquivo da lista uploadFiles (externos) é removido pelo usuário. O objeto emitido contém os dados do arquivo removido. | true |
selectedFilesChange | Emitido quando a lista de arquivos selecionados muda. | true |
Métodos
checkValidity
| Assinatura | checkValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do componente for válido, caso contrário false.Se o componente for inválido, dispara um evento 'invalid'. |
| Parâmetros | --- |
reportValidity
| Assinatura | reportValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do componente for válido, caso contrário false.Se for inválido, exibe a mensagem de erro padrão do navegador. |
| Parâmetros | --- |
setCustomValidity
| Assinatura | setCustomValidity(message: string) => Promise<void> |
| Descrição | Define uma mensagem de validação customizada para o upload. Se a mensagem for uma string vazia, o erro customizado é limpo. |
| Parâmetros | message: |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"button" | Botão de seleção de arquivo. |
"container" | Wrapper principal do upload. |
"file-list" | Lista de arquivos selecionados. |
"input" | Elemento input de arquivo. |
"label" | Rótulo do campo de upload. |