shadcn.io is not affiliated with official shadcn/ui
Drag Drop Files Chat Block for React Aria
A team messenger thread where files dropped anywhere on the window land in a tray as removable cards, capped at five per message, and Send posts them as a message of file cards.
Installation
Overview
Drop a file straight into the conversation with this drag drop files chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Dropvale, a team messenger, drawn with two files already staged in a tray above the composer. Dragging files over the window shows a dashed "Drop files to add them" layer, and the visible "Attach files" Button opens the browser's file chooser for the keyboard and for phones. Each file becomes an Attachment card with its name, size, a glyph for its type and a remove button. A message takes at most five; the rest are refused and an error card says "Up to 5 files per message". Send posts the staged files as a message of cards, with whatever you typed above them, and a short reply follows. Only each file's name and size are read, and the tray says the files are never uploaded. The Shine Button that sends is the only colored control, and the frame is ruled by Guides. For a team messenger, a support thread or any chat that takes documents.
FAQ
How does the drop target work?
The window listens for real drag events and shows the dashed layer only while a drag that carries files is over it, so dragging selected text or a link does nothing. The layer is decorative and hidden from assistive technology, because the Attach files button does the same job with a keyboard or a screen reader.
What happens past five files?
The first five fit and the rest are not added. A card in the error state says how many were left out and that up to five files fit in one message; it goes away when you dismiss it, remove a file or send. The status line says the same in words.
Are the files read or uploaded?
No. The block reads only each file's name and size, and the bytes stay on your device, which the tray says. In your app, upload each file to storage when it is staged or when Send is pressed, show progress on the card, and post links when the upload ends.
How does it choose a glyph?
From the end of the file name: images, archives, spreadsheets and documents each have one, and anything else gets a plain file glyph. Replace it with a check of the file's real type if you need to.