shadcn.io is not affiliated with official shadcn/ui
IPFS Upload Web3 Block for Svelte
A pinning queue that fingerprints files in the tab: drop files, press Fingerprint, and each gets a SHA-256, a sample content id and a gateway link with copy buttons, plus a local Pin toggle and a remove. Nothing is uploaded.
Installation
Overview
Prepare files for IPFS and see their fingerprints, with this queue for Svelte with Ark UI. It's the dashboard of Pinbarn, a pinning service. A hairline frame with a plus mark on each corner starts with a compact File Upload drop zone and an Add files Button; files you add stay in the tab. Below it a queue lists each file with its name and size, and three typed text files are already there. Fingerprint, the one Shine Button, reads the files and hashes their bytes with crypto.subtle; each row then shows a short SHA-256 with a Copy Button, a gateway link with another, and a Pin toggle that is local. The sample id in the link is the hash written in the shape of an IPFS id and is labelled as such. Rows can be removed, and an empty queue says so without the panel changing height. For NFT tools, publishing flows and any app that hands files to IPFS.
FAQ
What is actually computed?
A real SHA-256 of each file's bytes, in the browser, when you press Fingerprint, using crypto.subtle.digest. The seeded files are typed text, so they hash too, and the first is already done so a finished row is visible. A file is read only on that press and only in the tab.
Is the content id real?
No, and the row says so. A real IPFS content id is made by IPFS from the file's blocks (chunks, a Merkle DAG and a multihash), so it is not the SHA-256 of the file. The sample id here is that hash written in base32 after the usual prefix, so it looks right and will not resolve on any gateway. In your app pin the file with your service and show the id it returns.
What stays local, and how do I wire it?
Everything: nothing is uploaded, and the gateway links use gateway.example. Pin only toggles local state and needs a fingerprint first. In your app replace fingerprint with an upload to your pinning service (progress per file), store the returned id, and build the link from your gateway.
How many files and how large?
Up to eight files are queued. A file is read whole into memory when hashed, so very large files are better hashed in chunks with a streaming hash in your app; the demo doesn't cap size.
Is it accessible from the keyboard?
Yes. The drop zone is a named group with a real button inside, the queue is a named scroll region, copy, pin and remove buttons name their file, Pin reports its state as pressed, and one polite status line reports each add, hash and removal. The Shine Button stays the same size while it hashes.