shadcn.io is not affiliated with official shadcn/ui
File Attachment Comments Block for Svelte
A comment thread with an attach flow: the file upload takes PDF, TXT, CSV or PNG up to 2 MB, three at most, lists why a file was refused, shows accepted files as cards with a type tile and size, and keeps them on the posted comment.
Installation
Overview
Let people attach files to a comment and see exactly what was taken, with this attachment thread for Svelte with Ark UI. A folder note called Q3 vendor review in Stapleby has two comments that carry typed file chips, and the composer under them holds the catalog File Upload: PDF, TXT, CSV or PNG up to 2 MB, three at most, by drop or by Attach files. A file the upload refuses is listed with the reason ("notes.zip: type not allowed", "big.pdf: over 2 MB"), an accepted one becomes a card built from Item parts with a two-letter type tile, its size and Remove, and a counter says how many of three are used. Posting puts the cards on the comment with an Open link to the copy this tab holds. Files stay in this tab: nothing is uploaded, and the copies are released when you remove them or leave the page. Built from File Upload, Item, Badge, Textarea, Button, Field, Avatar, Shine Button and Guides. For shared drives, tickets and any thread where the file is part of the conversation.
FAQ
How do I change the allowed files?
Edit ACCEPT (media types and extensions), LIMIT (bytes) and MAX_FILES at the top of the file, and the helper text that repeats them. The reasons shown for a refusal come from reasonOf, which reads the upload's error codes. The earlier comments' chips are typed in START: a name and a size in bytes.
What stays local, and how do I make it real?
Files stay in this tab. Each accepted file gets an object URL for the Open link; it is revoked when you remove the file and when the page unmounts. To make it real, send each file from accepted to your storage (a signed upload URL is the usual way), keep the returned id with the comment, and check type and size again on the server: the browser's checks are a convenience, not a rule.
How are refused files reported?
The upload calls one handler for accepted files and another for refused ones, possibly in the same drop. Refusals are listed under the drop zone (two lines, then "and N more") in a reserved slot, and the polite status line says how many files were not added. A fourth file is refused with "only 3 files fit" even when it is otherwise fine. Removing a file or posting clears the list.
Is it accessible?
The drop zone has a name that includes its visible text and a real Attach files button for keyboard and touch. Each card's Remove button names its file, Open names its file too, and removing a file returns focus to Attach files. Type tiles are decorative; the name and size are text. The status region is present from load.