# Malote An area to drag files into or click to choose, with a card that lifts up and a list of the selected files. > Malote is a THM Componentes component that receives files by drag and drop or a click. When the mouse hovers or a file is dragged over it, a card with an upload icon lifts up and reveals a dashed outline. Each file appears in a list with its name, size, type and date, over a subtle checkered grid. - Category: Forms and input - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/malote/ ## What it looks like In the center, over a grid of light squares that fades at the edges, sit a heading, a short instruction and a square card with an upload arrow. When the mouse passes over it, or when someone drags a file across the area, the card springs up and to the right and reveals a dashed blue outline, like an empty slot. Once files are dropped or chosen, the card gives way to rows that unfold horizontally, one per file, with name, size in MB, type and date. The component has light and dark versions. ## You may be looking for this if you asked for something like - “a drag and drop area for files in my form” - “a nice upload field for sending documents” - “a box where people can drop their PDF” - “show the list of chosen files with name and size” - “an upload area that animates when I drag a file over it” - “make the document upload in my portal look like a modern app” ## Also known as file upload, drag and drop upload, dropzone, file input, upload area, file drop zone ## When to use - Document uploads in customer portals and sign-ups - Application forms with a resume, receipt or photo - Internal dashboards that receive spreadsheets or images ## When to avoid - Flows that need a progress bar or file removal, unless you ask your AI to add them - Keyboard-only use in the original, since the area does not take focus ## How to ask your AI ```text Add a drag and drop dropzone for document uploads to my form: a list with name, size and type, size and file type limits, a remove button, keyboard access, localized texts and my brand colors. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Malote ### Does Malote send the file to a server? No. Malote only collects the chosen files and emits an onChange event with the full list of File objects. Sending to your API or storage, a progress bar and removing items have to be added; your AI can build that on top of this event. ### Can I limit file types and size in Malote? In its original form, Malote accepts any file with no size limit. To restrict it to PDFs or images, cap the size or allow several files per click, ask your AI to adjust the file input; when dragging, the area already accepts several files at once. ### Does Malote work in a plain Vue project? Yes, with a small change. Malote ships wrapped in ClientOnly, a Nuxt feature, and uses an icon component, so in a Vue-only project your AI removes the wrapper and swaps the icon. The heading and instruction are fixed in English in the code and can become props. ## Related components - [Prancheta](https://vibecode.thmtecnologia.com/en/components/prancheta/): An in-page photo editor to crop, rotate, adjust brightness and color, apply filters and export the image. - [Despachante](https://vibecode.thmtecnologia.com/en/components/despachante/): A multi-step sign-up form that formats and checks Brazilian CPF, CNPJ, phone, CEP and password as people type. - [Tocha](https://vibecode.thmtecnologia.com/en/components/tocha/): A text field whose border lights up in blue right where the cursor passes, like a small flashlight on the frame. - [Apagador](https://vibecode.thmtecnologia.com/en/components/apagador/): A pill-shaped field with hints that slide up and rotate; on submit, the typed text crumbles into dust. - [Tabelião](https://vibecode.thmtecnologia.com/en/components/tabeliao/): An area to sign with a finger, stylus or mouse, with a baseline, the signer's name, the date and export. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).