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
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.
