Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Trash Recovery File Upload Block for React Aria

A recoverable trash for a shared drive: each deleted file shows its original folder and a bar draining over 30 days, Restore sends it back with Undo, and Delete forever and Empty trash ask first.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people undo a deletion before it is final, with this trash panel for React with React Aria. It is the bin of Salvager, a shared drive: eight deleted files, each with the folder it came from, who deleted it and a thin Progress bar that drains over the 30 days the drive keeps it, worked out from the deleted date and one fixed "now". Restore sends a file back to its folder, the row leaves and "Undo restore" appears in the foot. Delete forever and Empty trash open an Alert Dialog that names what will be lost, with first focus on Keep in trash. The foot says what the bin holds out of 2 GB, worked out from the rows. The list is a held scroll region, so nothing moves when a row leaves. The panel is ruled by Guides. It is built from Alert Dialog, Progress, Button and Guides, with a CSS entrance only. For drives, document tools and any app that soft-deletes.

FAQ

How is the time left worked out?

Each file has a deleted date, and one fixed "now" is used for every count, so the bar and "28 days to go" are the same on every visit. The bar is 30 days minus the days since the deletion. In your app, compute it from the file's deletedAt on the server and let a scheduled job purge at day 30.

What happens when I press Restore?

The row leaves the bin, the status line says which folder the file went back to, and focus moves to the next row's Restore button. "Undo restore" in the foot puts the file back in the bin; it only appears after a restore, and its space is reserved so the foot does not jump.

Why do Delete forever and Empty trash ask first?

They cannot be undone. The confirmation is an alert dialog: it does not close on an outside click, first focus is on Keep in trash, and Escape cancels. After confirming, focus moves to the next row, or to the list when it is empty.

Where does the size in the foot come from?

It is the sum of the files still in the bin (37.9 MB to start), shown against the 2 GB the drive reserves for it, so restoring or deleting a file changes it at once.

What if the bin is empty?

The list shows a short sentence in the same box and Empty trash stays focusable but answers "The trash is already empty." The panel keeps its height.

What stays local, and how do I wire it?

Restoring and deleting change a list in the tab; no file exists. In your app, call your restore and purge endpoints from restore and confirm, and send the deleted file's id, never its name, in the request.

All 100 file upload blocks