shadcn.io is not affiliated with official shadcn/ui
Paste URL File Upload Block for Solid
A client note with an Add file popover shown open: From device and From link tabs, a link read with the real URL as you type for https, an allowed host and a file name, and a chip added when you fetch.
Installation
Overview
Let people add a file from a link as easily as from their computer, with this attach popover for Solid with Ark UI. It opens from the header of a client note in Fetchmark, a CRM: an outline Add file Button over a drawn compose card, with the Popover drawn open under it. Its Tabs are From device, a small File Upload zone with a Choose a file button, and From link, a Field with an Input that reads the address with the browser's URL as you type: https only, a host from the allowed list, a file name with an extension, and a sentence for what it found ("Will fetch report-q3.pdf (PDF) from files.vendor.test") or what is wrong. Fetch, a Shine Button, adds a chip "report-q3.pdf, size unknown"; a device file adds its real name and size. Chips sit in a band under the card and can be removed. The frame is ruled by Guides. For CRMs, ticketing tools, email composers and any app that attaches files by link.
FAQ
Why is the popover already open, and what do I keep?
So you can see it without a click. On load the popover is a copy drawn in place on the note: a native non-modal dialog element with no scrim, so nothing is trapped or focused. The Add file button opens the real non-modal Popover that hangs from the button (Escape closes it and focus goes back), and the copy stays closed until a reload. Both show the same AttachPanel and share the block's state. In your app keep the Popover and drop the copy: the "in-place" state, the dialog and the Escape effect.
What exactly is checked in the link?
Four things, in this order: it parses as an address, its scheme is https (http is refused), its host is on the allowed list (HOSTS, both ending in .test here), and its last path segment is a file name with an extension. Each failure has its own sentence, and Fetch stays disabled until the link passes. Nothing is requested: the address is only read.
Why does a fetched file say size unknown?
Because nothing is fetched. A real fetch would learn the size from the response or a HEAD request; the chip says "size unknown" until yours does. A file chosen from the device shows its real size.
How do the chips work?
Up to five, no duplicates by name, each with a Remove button named for its file. Removing one moves focus to the next chip, or back to Add file when it was the last. A full note says so instead of adding.
What stays local, and how do I wire it to a real fetch?
The chips, the typed link and the open tab are local state. To attach for real, send the validated link to your server from fetchLink, let it download the file (the allowed-hosts list belongs there too, to prevent server-side request forgery), and replace the chip's note with the size it reports.