shadcn.io is not affiliated with official shadcn/ui
Email Attachment File Upload Block for Svelte
A compose form with To, Subject and a message, an attachment tray of chips and a meter against 25 MB that offers Send as a link instead at 90% and names which file to remove when over.
Installation
Overview
Keep a message under its size limit before it bounces, with this file upload panel for Svelte with Ark UI. It is the compose form of Parcelmail, a mail client for small teams. To and Subject are Input fields, the message is a Textarea, and the attachment tray is a row of wrapping Attachment chips whose paperclip is a File Upload trigger. A Progress meter, with a tick at 90%, fills with what is attached against the 25 MB a message may carry; three files, 20.6 MB, are attached to start. At 90% the meter offers Send as a link instead, and the chips turn into link chips that no longer count. Over the limit the line under the meter says which file to remove, or to send as a link, and the one Shine Button, Send, waits. The panel is ruled by Guides. It is built from File Upload, Attachment, Progress, Input, Textarea, Shine Button and Guides, with a CSS entrance only. For mail clients, support inboxes and any form that sends files.
FAQ
How does the meter work?
It adds the byte sizes of the files in the tray and shows the total against 25 MB, with words for how much is left. Under 90% it just says the space left; from 90% it says "Nearly full" and offers the link; past 100% it says by how much you are over. The tick marks 90%. The numbers and the words come from the same sum, so they cannot disagree.
Which file does it tell me to remove?
The smallest file that, taken out alone, brings the message under the limit. If no single file is enough it names the largest one, and after removing it the line recalculates. Remove is always available on each chip, with the file's name in its label.
What does Send as a link instead do?
It switches the whole tray to links: the chips show a link icon and "Link" before the size, and the meter counts nothing because links carry no attachment. A second button, Attach the files instead, undoes it. In your app, upload the files to storage and put their addresses in the message.
Does Send send an email?
No. It checks that To looks like an email address and that Subject is not empty, with a problem under the field and focus on it when not, and then clears the form and says in the status line that no email was sent. Send waits, with its reason in the line under the meter, while the files are over the limit.