shadcn.io is not affiliated with official shadcn/ui
Success State File Upload Block for React Aria
A delivery page for a finished transfer: a check seal, the transfer's facts, a QR code of the share link, time, size and speed figures, a copyable link, the stored files and a View file button.
Installation
Overview
Say clearly that the upload worked and hand the visitor the next step, with this file upload panel for React with React Aria. It is the delivery page of Dropdone, a transfer service, shown once a transfer has finished. A drawn check seal sits in a muted tile beside the transfer's name and a one-line summary, with a Data List of the transfer, the day it was sent and the day it expires. A side cell holds a QR Code of the share link, so the transfer opens on a phone. Under them three figures, time, size and speed, are worked out from the typed files and the typed time. The share link sits in a read-only Input with a Copy Button, and the three files are listed as Attachment rows. The foot has the one Shine Button, View file, and Upload more, a File Upload trigger whose picks are counted for a next transfer. The panel is ruled by Guides. It is built from File Upload, QR Code, Data List, Copy Button, Attachment, Input and Guides, with a CSS entrance only. For transfer services, file-sharing tools and any flow that ends in a link.
FAQ
What is typed and what is worked out?
The transfer's name, its three files with their byte sizes, the 14 seconds it took, the sent and expiry days and the link are typed. The total size, the speed in megabytes per second, the file count and the "7 days" next to the expiry are worked out from them, so changing a file's size changes every figure that depends on it. Days are fixed ISO strings, so the page reads the same for everyone.
Is the QR code real?
Yes. It encodes the share link in the browser with the QR Code component and scans like any other. It is drawn black on white, as scanners expect, in both themes. The link itself is an example address and leads nowhere.
How does Copy work?
It writes the link to the clipboard and swaps its icon for a check for three seconds. The polite status line also says "Transfer link copied" once, so screen reader users hear it. On a page that is not served over HTTPS the browser refuses to copy, and the button shows a cross instead.
What does Upload more do?
It opens the file picker. Picked files are counted for a next transfer by name and size, in a line under the file list that reads "Next transfer: nothing picked yet" until you pick, and Clear empties it. They are never opened and nothing is uploaded.
What stays local in the demo, and how do I wire it up?
All of it. View file only says what it would do, because there is no page to open. In your app replace the typed transfer with the response of your upload, build the QR value from the link your server returns, and make View file a link to the file's page. Keep the status line, which reports each action.
How does it look on a phone?
The bands stack: the seal and facts first, then the QR code under a hairline, the three figures in a row, the link and the files. The foot sticks to the bottom of the screen with View file and Upload more side by side, and the copy button grows to a comfortable touch size.