shadcn.io is not affiliated with official shadcn/ui
Expiring Link File Upload Block for React
Four shared files with a lifetime Select on each row, a bar and words for the time remaining worked out from a fixed day, download counts, Revoke now with a confirm, and an auto-delete switch.
Installation
Overview
See which download links are about to stop working, with this file upload panel for React with Base UI. It is the link list of Meltlink, a link service for a freelancers' invoicing tool. Four files each have a link, and every row writes the moment it ends, fills a Progress bar with the share of its lifetime still remaining, says how long that is in words and counts the downloads. A Select on the row picks the lifetime (1 hour, 1 day, 7 days or 30 days) and changing it works the end, the bar and the words out again at once. Revoke now asks in an Alert Dialog, with Cancel focused, and then marks the link Revoked. An Auto-delete after expiry Switch decides whether an ended link says its file is deleted. The panel is ruled by Guides. It is built from Select, Progress, Switch, Alert Dialog, Badge and Guides, with a CSS entrance only. For invoicing tools, client deliveries and any link that should not live forever.
FAQ
What is typed and what is worked out?
Each file's name, size, the moment its link was made and its download count are typed. The end moment, the share left on the bar, the words ("3 d 1 h remaining"), the Live or Expired badge and the "3 of 4 live" count are all worked out from those and the lifetime on the row.
What happens when I change a lifetime?
The end moment is the day the link was made plus the new lifetime, so a longer lifetime brings an ended link back to Live and a shorter one can end it. The status line says when the link now ends.
What does Revoke now do?
It asks first, with Cancel focused. Confirming marks that row Revoked, empties its bar and disables its lifetime Select and button. The other rows are unchanged.
What does the auto-delete switch change?
Only the words on ended and revoked rows: "File deleted" when it is on, "File kept" when it is off. Nothing is deleted in this demo; in a real app the same setting would drive a scheduled job.
Does the countdown tick?
No. Every moment is worked out from one fixed "as of" time, 18 October 2026 at 09:00 UTC, so the page is the same on every load and nothing moves on its own.
What stays local, and how do I wire it?
The lifetimes, revokes and the switch live in this page only and nothing is sent. To wire it, store each link's created moment and lifetime on your server, check them on every download, and run a scheduled job that deletes the files of ended links when the setting is on.