Version History
A version timeline for one key with one-click restore — driven by useFiles and the versioning plugin.
Lists the saved snapshots of a key (newest first) and restores any of them. Backed by the versioning() plugin, so it needs a gateway whose Files instance is wrapped with it and whose authorize allow-lists the versions and restoreVersion operations.
Loading…
"use client";import { useFiles } from "files-sdk/react";import { VersionHistory } from "@/components/files-sdk/version-history";const Example = () => { // A demo gateway whose `Files` instance is wrapped with the `versioning()` // plugin and seeded with a short edit history for `notes.txt`. const files = useFiles({ endpoint: "/api/files-versions" }); return <VersionHistory files={files} fileKey="notes.txt" />;};export default Example;Installation
npx shadcn@latest add https://files-sdk.dev/r/version-history.jsonpnpm dlx shadcn@latest add https://files-sdk.dev/r/version-history.jsonbunx --bun shadcn@latest add https://files-sdk.dev/r/version-history.jsonUsage
import { useFiles } from "files-sdk/react";
import { VersionHistory } from "@/components/files-sdk/version-history";
export function History({ fileKey }: { fileKey: string }) {
const files = useFiles({ endpoint: "/api/files" });
return <VersionHistory files={files} fileKey={fileKey} />;
}Restoring snapshots the current bytes first, so it's itself reversible — an "undo" you can undo. The gateway must expose the plugin verbs:
createFilesRouter({
files: createFiles({ adapter, plugins: [versioning()] }),
operations: ["versions", "restoreVersion"],
});Props
Prop
Type