shadcn.io is not affiliated with official shadcn/ui
Encrypted File Upload Block for React Aria
Choose who a delivery is sealed for with a switch and a key fingerprint per recipient, follow each file through Encrypting, Uploading and Stored, and check a pasted SHA-256 against a sample digest.
Installation
Overview
Say plainly who can open a delivery, with this file upload panel for React with React Aria. It is the sealed delivery of Sealwax, which sends privileged documents between law firms and their clients. Encrypt for lists three recipients, each with a role, a typed key fingerprint and a Switch; you are always on. A sentence under the list says who can open the files, worked out from the switches. The files cell lists each file with a three-step strip and its stage in words (Encrypting, Uploading, Stored), and Move on advances one. Below both, a checksum check compares the SHA-256 you paste with a sample digest of the sealed bundle, character by character, and says match, how far it agrees, or which character differs; the digest has a Copy Button. Add files is a File Upload trigger. The panel is ruled by Guides. It is built from File Upload, Switch, Input, Copy Button, Shine Button, Button and Guides, with a CSS entrance only. For legal, finance and health teams that need to show the recipients of a delivery.
FAQ
Is anything encrypted?
No. This is a drawing of the flow, and the panel says so in its header and its status line. The fingerprints, the key list and the stages are typed. Do not rely on the demo for any security claim.
How do the switches work?
Each switch adds or removes a recipient and the sentence under the list is rewritten from them, such as "Only you and Outside counsel can open these files." You are always a recipient: pressing your own switch leaves it on and the status line says why. Each recipient's fingerprint is shown in a left-to-right monospace line so it can be read aloud and compared.
Is the checksum check real?
The comparison is real; the digest is a sample. The pasted text is cleaned (spaces, colons and an optional sha256 prefix are dropped, and case is ignored) and compared with the 64 characters shown, so you can copy the sample to see a match, change one character to see which one differs, or paste part of it to see how far it agrees. The block never computes a hash of any file.
What do the stages mean?
Encrypting, Uploading and Stored are typed states. Move on advances a file one step at a time and the strip fills to match; a Stored file has no button. Added files start at Encrypting.
Does it read the files I add?
No. A picked file is listed by name and size and never opened, so nothing is read, encrypted or sent. The list holds 12 files.
How do I wire it to real encryption?
Encrypt in the browser or on your server to the selected recipients' public keys, show the real fingerprints from your key store, drive the stages from the real upload, and compute the digest of the delivered bundle on the server to show beside the check. Keep the sentence about who can open the files tied to the keys actually used.