shadcn.io is not affiliated with official shadcn/ui
Form Attachment File Upload Block for React Aria
A problem report whose message box is the drop zone: drop, paste or press the paperclip to add up to 3 files of 10 MB inside the same border, then Send report swaps the box for a confirmation.
Installation
Overview
Let people attach evidence where they write, instead of in a second box, with this file upload panel for React with React Aria. It is the problem reporter of Bugbasket, an in-app bug tool. One bordered field holds a Textarea and, under the text and inside the same border, a tray of Attachment chips with a paperclip and a count. The whole field is the File Upload drop zone: drag a file over it and it rings, paste a file into the text, or press the paperclip. Up to three files of 10 MB are kept; one that is too big or one too many is refused with its reason. The one Shine Button, Send report, checks that the message is not empty and then replaces the box with a confirmation that lists the files, in the same space, with Write another to come back. The panel is ruled by Guides. It is built from File Upload, Textarea, Attachment, Field, Shine Button and Guides, with a CSS entrance only. For bug reporters, help widgets and any form where a screenshot says more than a paragraph.
FAQ
Why is the whole box a drop zone?
Because people drop a screenshot where they are typing. The File Upload drop zone wraps the text and the tray, with clicks turned off so that clicking in the text places the cursor instead of opening a picker. The paperclip is the button for opening the picker, and it is a full touch target on a phone.
Can I paste a file?
Yes. Pasting a screenshot into the text adds it to the tray, through the same checks as a drop, and ordinary pasted text still goes into the message. The block reads only the pasted file's name and size, never its content.
What are the limits and what happens past them?
Three files of up to 10 MB each. A file over 10 MB is not added and the status line names it; a fourth file is not added and the line says only three fit. If some of a drop fit, those are added and the line says what was left out.
What does Send report do?
It checks that the message is not empty, with a problem under the field and focus back in it when it is. Otherwise it swaps the box for a confirmation in the same place, so nothing around it moves, lists the files, and says in the status line that nothing was sent. Write another clears the message and the tray and returns to the box.
What stays local in the demo, and how do I wire it up?
All of it: a screenshot is typed into the tray to start, files are listed by name and size and never opened, and nothing is uploaded. In your app upload each file from the checked list when the form is sent, and attach the returned ids to the report.