Skip to content
Files SDK
Esc
navigateopen⌘Jpreview
On this page

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 { demoFiles } from "@/lib/demo-files";
import { VersionHistory } from "@/registry/files-sdk/version-history/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 = demoFiles;

  return <VersionHistory files={files} fileKey="notes.txt" />;
};

export default Example;

Installation

npx shadcn@latest add https://files-sdk.dev/r/version-history.json

Usage

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

PropType
filesUseFilesResult

A `useFiles()` instance backed by a gateway with the `versioning()` plugin.

TypeUseFilesResult
fileKeystring

The key whose history to show.

Typestring
onRestored?(file: { key: string }) => void

Called after a successful restore.

Type(file: { key: string }) => void
className?string
Typestring

Was this page helpful?