# Malote Área para arrastar arquivos ou clicar e escolher, com um cartão que se levanta e a lista dos arquivos escolhidos. > Malote é um componente do THM Componentes para receber arquivos com arrastar e soltar ou com um clique. Ao passar o mouse ou arrastar algo por cima, um cartão com ícone de envio se levanta e revela um contorno tracejado. Cada arquivo aparece numa lista com nome, tamanho, tipo e data, sobre uma grade quadriculada discreta. - Categoria: Formulários e entrada - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/malote/ ## Como ele é No centro, sobre uma grade de quadradinhos claros que somem nas bordas, ficam o título, uma frase de instrução e um cartão quadrado com uma seta de envio. Quando o mouse passa por cima, ou quando a pessoa arrasta um arquivo sobre a área, o cartão desliza para cima e para a direita com efeito de mola e deixa à mostra um contorno tracejado azul, como um encaixe vazio. Ao soltar ou escolher arquivos, o cartão dá lugar a fichas que se abrem na horizontal, uma por arquivo, com nome, tamanho em MB, tipo e data. O componente tem versões para claro e escuro. ## Você pode estar procurando isto se pediu algo assim - “área para arrastar e soltar arquivos no formulário” - “campo de upload bonito para enviar documentos” - “caixa para a pessoa jogar o PDF ali dentro” - “mostrar a lista dos arquivos escolhidos com nome e tamanho” - “upload com animação quando passo o arquivo por cima” - “deixar o envio de documentos do portal com cara de app moderno” ## Também chamado de file upload, drag and drop upload, dropzone, upload de arquivos, área de upload, arrastar e soltar, file input ## Quando usar - Envio de documentos em portais de clientes e cadastros - Formulários de inscrição com currículo, comprovante ou foto - Painéis internos que recebem planilhas ou imagens ## Quando evitar - Fluxos que precisam de barra de progresso ou remoção de arquivos, sem antes pedir isso à IA - Uso só com teclado no original, já que a área não recebe foco ## Como pedir para a sua IA ```text Adicione uma área de upload com arrastar e soltar, tipo dropzone, ao formulário de documentos: lista com nome, tamanho e tipo, limite de tamanho e de formatos, botão para remover, acesso pelo teclado, textos em português e cores da minha marca. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Malote ### Malote envia o arquivo para o servidor? Não. Malote só reúne os arquivos escolhidos e emite o evento onChange com a lista completa de objetos File. O envio para a sua API ou armazenamento, a barra de progresso e a remoção de itens precisam ser acrescentados; a IA pode montar isso a partir desse evento. ### Dá para limitar tipos e tamanho em Malote? O original de Malote aceita qualquer arquivo e não tem limite de tamanho. Para restringir a PDF ou imagens, travar o tamanho máximo ou aceitar vários arquivos pelo clique, peça à IA para ajustar o input de arquivo; arrastando, a área já aceita vários de uma vez. ### Os textos de Malote estão em português? Não. Malote vem com o título e a instrução em inglês, fixos no código, e dentro de um ClientOnly, recurso do Nuxt. Peça à IA para traduzir os textos ou transformar cada um em prop e, num projeto só com Vue, remover esse invólucro. ## Componentes relacionados - [Prancheta](https://vibecode.thmtecnologia.com/componentes/prancheta/): Editor de fotos dentro da página para recortar, girar, ajustar brilho e cor, aplicar filtros e exportar a imagem. - [Despachante](https://vibecode.thmtecnologia.com/componentes/despachante/): Cadastro em etapas que formata e confere CPF, CNPJ, telefone, CEP e senha enquanto a pessoa preenche. - [Tocha](https://vibecode.thmtecnologia.com/componentes/tocha/): Campo de texto cuja borda acende em azul no ponto por onde o cursor passa, como uma lanterna na moldura. - [Apagador](https://vibecode.thmtecnologia.com/componentes/apagador/): Campo em pílula com dicas que sobem e se alternam; ao enviar, o texto digitado se desfaz em pó. - [Tabelião](https://vibecode.thmtecnologia.com/componentes/tabeliao/): Área para a pessoa assinar com dedo, caneta ou mouse, com linha de base, nome, data e exportação da assinatura. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.