shadcn.io is not affiliated with official shadcn/ui
Versioned File Upload Block for Solid
A version history for one document: a rail of five versions with who saved them, the date, the size and a size-change chip, the open version drawn to scale against the current one, and a restore that saves a new version.
Installation
Overview
Show how a file changed and let people go back without losing anything, with this version history panel for Solid with Ark UI. It is the history of Pentimento, document history for an editing team: a rail of five saved versions of one feature draft, newest first, each with who saved it, a fixed date, its size and a chip with the change in size, such as "+112 KB" or "−310 KB". The open version sits beside the rail with its size drawn to scale against the current one in Progress bars that share one scale. "Restore this version" never rewrites the past: it saves a new version made from the old one, "v6, restored from v3", and says so. "Upload new version" is a File Upload trigger and adds the next version with the picked file's name and size. The rail is a held scroll region, so a new version never moves the panel. The panel is ruled by Guides. It is built from File Upload, Progress, Badge, Button and Guides, with a CSS entrance only. For editors, design tools and any app that keeps history.
FAQ
What does Restore do to the old versions?
Nothing. It adds a new version at the top of the rail with the same size as the one you restored, labelled "Restored from v3". Every earlier version stays, so a restore can itself be restored from. The status line says which version was created.
What happens when I upload a new version?
The picked file's name and size become the next version, saved by "You" on the fixed demo date, and it is selected. The file is not read or sent. Files over 200 MB are refused with a message and no version is added.
Are the bars really to scale?
Yes. Both bars use the same scale, from 0 to the largest saved version, and a caption says so. The caption also states in words whether the open version is larger, smaller or the same as the current one, so the comparison does not depend on seeing the bars.
Where do the size chips come from?
Each chip is the version's size minus the one before it, worked out from the list, so a new version gets its chip at once. The first version reads "First". The sign is in the text, never only in a colour.
How do I use it from the keyboard?
Tab reaches the rail, which is a scroll region whose rows are buttons; Enter or Space opens a version. The open row is marked as current for assistive tech. After a restore or an upload, focus moves to the new version's row.
What stays local, and how do I wire it?
The five versions are typed at the top of the file and everything else changes a list in the tab. To make it real, load the versions from your API, call a restore endpoint that creates the new version on the server, and send the picked file in the upload handler.