import { type EventEmitter } from '../../stencil-public-runtime'; import { type FormValidationState } from '../../shared/utils/form'; import type { IUploadFile } from '../../shared/utils/interfaces'; import { type FormValidationChangeDetail } from '../../shared/utils/validator'; import type { BrFeedbackState } from '../global.types'; import type { UploadErrorDetail, UploadFileDetail, UploadHandler, UploadProgressDetail, UploadValidator } from './upload.types'; /** * O `br-upload` gerencia a seleção e envio de arquivos em formulários, com suporte a arrastar e soltar (drag and drop). * * Defina os tipos aceitos em `accept` e permita múltiplos arquivos com `multiple`. Use a lista de arquivos para exibir o progresso e o botão de exclusão. * * ```html * * ``` * * Em formulários HTML, o componente integra-se via `ElementInternals`, enviando a lista de arquivos no submit nativo. * * ### Quando usar * * - Anexar comprovantes, fotos ou documentos em formulários. * * ### Quando evitar * * - Campo de texto ou URL de arquivo remoto: use `br-input`. * * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/upload?tab=designer). * * @category Formulários, Dados * @status stable * @slot default - Conteúdo personalizado do botão de upload, com precedência sobre `buttonLabel` (use a prop para texto simples). * @slot upload-list - Permite customizar a área de listagem de arquivos. Se utilizado, substitui a lista padrão gerada pelo componente. * @slot label - Rótulo customizado do upload. Quando utilizado, a prop `label` é ignorada. * @slot helper - Texto auxiliar exibido abaixo da superfície de seleção. * @slot feedback - Mensagem de validação, normalmente um `br-message`. * @slot loading - Conteúdo exibido enquanto o handler fornecido pela aplicação envia um arquivo. * * @part container - Wrapper principal do upload. * @part label - Rótulo do campo de upload. * @part input - Elemento input de arquivo. * @part button - Botão de seleção de arquivo. * @part helper - Texto auxiliar do upload. * @part remove-button - Botão de remoção de arquivo. * @part file-list - Lista de arquivos selecionados. * @part feedback - Contêiner da mensagem de validação. * @part loading - Estado e progresso do envio assíncrono. */ export declare class Upload { private readonly fileKeys; private fileKeySequence; elementInternals: ElementInternals; formDisabledCallback(disabled: boolean): void; formResetCallback(): void; formStateRestoreCallback(_state: string | File | FormData | null): void; /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrUploadElement; /** * Cache dos arquivos combinados para renderização unificada (evita recálculos desnecessários). */ allFilesCached: { file: File | IUploadFile; isNew: boolean; }[]; /** * Arquivo único quando a seleção não é múltipla. */ file: File | null; /** * Evento emitido quando um arquivo é selecionado. * Este estado armazena os arquivos que foram selecionados pelo usuário. */ filesSelected: FileList | null; formDisabled: boolean; hasFeedbackSlot: boolean; private dragging; customValidationMessage: string; validatorMessage: string | null; isValidating: boolean; private uploading; private uploadError; /** * Estado interno para armazenar os arquivos processados da prop uploadFiles. */ parsedUploadFiles: IUploadFile[]; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ customId: string; /** * Nome do campo enviado no formulário. */ name?: string; /** * Tipos de arquivo permitidos (ex.: 'image/*'). */ accept: string; /** * Sugere a câmera usada na captura de imagem ou vídeo. Valores inválidos são ignorados. * O navegador pode ignorar a preferência conforme dispositivo e permissões. */ capture?: '' | 'user' | 'environment'; /** * Rótulo exibido acima do botão de upload. */ label: string; /** * Texto do botão de seleção. Quando omitido, usa "Selecione o arquivo" ou, * com `multiple`, "Selecione o(s) arquivo(s)". O slot padrão tem precedência. */ buttonLabel?: string; /** * Lista de arquivos já enviados (para edição ou pré-visualização). * Pode ser uma string JSON ou um array de objetos IUploadFile. Cada item deve ter `name` não vazio e `size` numérico não negativo opcional; itens inválidos são ignorados. * * @example * ```html * * * ``` * @deprecated Use `existingFiles`. */ uploadFiles: string | IUploadFile[]; /** * Arquivos já existentes. Quando informada, tem precedência sobre `uploadFiles`. * Cada item deve ter `name` não vazio e `size` numérico não negativo opcional. * Use JSON no atributo HTML ou um array por property binding. * * @example * ```html * * ``` * @example * ```js * const upload = document.querySelector('br-upload'); * upload.existingFiles = [{ name: 'relatorio.pdf', size: 204800 }]; * ``` */ existingFiles?: string | IUploadFile[]; /** * Desabilita a interação com o componente. * */ disabled: boolean; /** * Se verdadeiro, o input de upload é obrigatório antes que o formulário possa ser enviado. */ readonly required: boolean; /** * Estado visual: 'info', 'warning', 'danger' ou 'success'. Valores inválidos não aplicam estado. */ state: BrFeedbackState; /** Estado de feedback. Quando informado, tem precedência sobre `state`. */ feedbackState?: BrFeedbackState; /** * 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. */ multiple: boolean; /** Quantidade mínima de arquivos, incluindo arquivos já enviados. Deve ser um inteiro não negativo; valores inválidos usam `0`. */ minFiles: number; /** Quantidade máxima de arquivos. Zero significa sem limite. Deve ser um inteiro não negativo; valores inválidos usam `0`. */ maxFiles: number; /** Tamanho máximo permitido para cada arquivo, em bytes. Zero significa sem limite. Deve ser um inteiro não negativo; valores inválidos usam `0`. */ maxFileSize: number; /** * Regra síncrona ou assíncrona aplicada à lista de arquivos selecionados. * O componente valida `File[]`, mas não envia arquivos nem interpreta a * resposta do servidor. * * @example * ```js * const upload = document.querySelector('br-upload'); * upload.validator = (files) => * files.every((file) => file.size <= 5_000_000) ? null : 'Cada arquivo deve ter até 5 MB'; * ``` */ readonly validator?: UploadValidator; /** * Função assíncrona opcional fornecida pela aplicação para enviar cada arquivo. * * O componente fornece o arquivo, um `AbortSignal` e uma função de progresso, * mas não conhece endpoint, autenticação nem formato de resposta. * * @example * ```js * const upload = document.querySelector('br-upload'); * upload.uploadHandler = ({ file, signal, onProgress }) => * enviarArquivo({ file, signal, onProgress }); * ``` */ readonly uploadHandler?: UploadHandler; /** Lista de arquivos selecionados, equivalente a `HTMLInputElement.files`. */ files: FileList | null; protected filesHandler(newValue: FileList | null): void; protected uploadFilesHandler(newValue: string | IUploadFile[]): void; protected existingFilesHandler(newValue?: string | IUploadFile[]): void; private parseExistingFiles; private normalizeExistingFiles; protected filesSelectedHandler(): void; /** * Emitido quando a lista de arquivos selecionados muda. * @deprecated Use `input`/`change` e leia `event.target.files`. */ selectedFilesChange: EventEmitter; /** * Evento emitido quando um arquivo da lista `uploadFiles` (externos) é removido pelo usuário. * O objeto emitido contém os dados do arquivo removido. * @deprecated Use `brUploadRemove`. */ brRemove: EventEmitter; /** Evento emitido quando um arquivo existente é removido. */ brUploadRemove: EventEmitter; /** Emitido quando o usuário fecha a caixa de seleção de arquivos sem escolher nada. */ brUploadCancel: EventEmitter; /** * Emitido ao iniciar e concluir a validação customizada. * O `detail` contém `validating`, `valid` e `message`. */ brUploadValidationChange: EventEmitter; /** Emitido antes de o `uploadHandler` processar um arquivo. */ brUploadStart: EventEmitter; /** Emitido quando o `uploadHandler` informa o progresso de um arquivo. */ brUploadProgress: EventEmitter; /** Emitido quando o `uploadHandler` conclui um arquivo. */ brUploadSuccess: EventEmitter; /** Emitido quando o `uploadHandler` falha ao enviar um arquivo. */ brUploadError: EventEmitter; componentWillLoad(): void; componentDidLoad(): void; componentDidUpdate(): void; disconnectedCallback(): void; /** * Retorna `true` se o valor do componente for válido, caso contrário `false`. * Se o componente for inválido, dispara um evento 'invalid'. */ checkValidity(): Promise; /** * 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. */ reportValidity(): Promise; /** * Define uma mensagem de validação customizada para o upload. * Se a mensagem for uma string vazia, o erro customizado é limpo. */ setCustomValidity(message: string): Promise; /** Executa o validator do upload e retorna se a lista atual é válida. */ validate(): Promise; /** Retorna um snapshot serializável da Constraint Validation API. */ getValidationState(): Promise; /** Cancela o envio atual iniciado pelo `uploadHandler`. */ cancelUpload(): Promise; private updateAllFilesCached; private emitFilesChange; private nativeInput?; private validationRunId; private uploadController?; private initialUploadFiles; private syncFormState; private isDisabled; private cancelPendingUpload; private uploadSelectedFiles; private getFileDataForForm; private updateValidity; private isAcceptedFile; private getCssClassMap; private get effectiveCapture(); private get effectiveState(); private get effectiveMinFiles(); private get effectiveMaxFiles(); private get effectiveMaxFileSize(); private handleRemoveFileSelection; private renderFilesUploaded; private getFileKey; private onInputChange; private handleDrop; private handleDragOver; private handleDragEnter; private handleDragLeave; private handleFileSelection; private readonly handleInputChange; private readonly handleNativeInput; private readonly handleNativeCancel; private renderUploadStatus; private renderUploadError; private renderFeedback; render(): any; }