shadcn.io is not affiliated with official shadcn/ui
Scan Report File Upload Block for Radix UI
An upload gateway's sample scan report: a Clean or Threat sample, one short scripted run, eight engine results, the sample's SHA-256 with Copy, and a Quarantine area with Restore.
Installation
Overview
Show what a scan report would say before a file reaches the library, with this file upload panel for React with Radix UI. It is the report page of Sluicegate, an upload gateway for a document service, and it says first that it tells a typed sample: nothing is scanned. A Segment Group picks the Clean or the Threat sample, a File Upload button lists a file of your own by name and size, and one Shine Button runs a short scripted pass, four steps of a thin Progress meter. The report fills in the same cells: a headline ("8 of 8 engines reported no match" or "2 of 8 engines flagged this file"), eight engines with their results, and the sample's SHA-256 with a Copy Button. In the Threat sample a Button moves the file to a Quarantined area, where Restore brings it back. The frame's bands are ruled by Guides. For upload gateways, admin consoles and any app that wants a scan report in its file flow.
FAQ
Does it scan my file?
No. The report is typed for the sample you pick, and the status line says "Sample results: nothing is scanned or uploaded" from load. A file you choose is listed by its name and size and is never opened, so its report stays the sample's, and the SHA-256 shown is the sample's, labelled that way. Do not read the Clean report as a safety claim: a real gateway runs its engines on the server.
What is the scripted run?
One bounded chain of four one-shot timeouts of 420 ms each, started by Scan sample and cleared if the block unmounts. The meter follows the step, the button shows its busy state and keeps its size, and when the chain ends the report fills in the cells it already occupied, so nothing moves. Choosing another sample or file resets the report to its "No report yet" state.
What does Quarantine do?
In the Threat sample it moves the file's row to the Quarantined area and the count to one file; Restore moves it back and returns focus to the Quarantine button. With the Clean sample, or before a run, Quarantine is present but announces that there is nothing to quarantine. In your app quarantine would move the stored object out of the library on your server and log who did it.
Where does the SHA-256 come from?
It is a typed 64-character string for each sample, set in a monospaced line that wraps instead of scrolling. Copy puts it on the clipboard and a polite message says so. To show a real hash, compute it from the file's bytes on your server; this demo never reads the file.
What stays local, and how do I wire it to a server?
Everything. The samples, the engines, the run and the quarantine are state in the block and are gone on reload. To make it real, post the chosen file to your scanning service, show its progress in the meter, replace ENGINES and the hash with the service's answer, and make Quarantine a call that changes the file's status.