Version History

A version timeline for one key with one-click restore - driven by useFiles and the versioning plugin; restore snapshots the current bytes first.

Lists the saved snapshots of a key’s earlier contents (newest first) and restores any of them. The current file isn’t a snapshot, so it isn’t listed — the top row is the previous version. 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.

"use client";

import { demoFiles } from "@/lib/demo-files";
import { VersionHistory } from "@/registry/files-sdk/version-history/version-history";

const Example = () => {
  // The docs preview has no gateway: `demoFiles` is a static stand-in for
  // `useFiles()` whose `versions()` returns a canned three-snapshot history and
  // whose `restoreVersion()` only logs. In an app, pass `useFiles()` against a
  // gateway whose `Files` instance uses the `versioning()` plugin.
  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