File Actions

A per-file actions menu — download, copy, rename, move and delete — driven by useFiles.

A ⋯ menu that routes every action through the useFiles() instance you pass in: download(), copy(), move() (rename is just a move that keeps the parent prefix) and delete(). Copy, rename and move open a small prompt for the destination key; delete confirms first.

"use client";

import { demoFiles } from "@/lib/demo-files";
import { FileActions } from "@/registry/files-sdk/file-actions/file-actions";

const Example = () => {
  const files = demoFiles;

  return (
    <div className="flex w-full max-w-sm items-center justify-between gap-4 rounded-lg border border-border p-3">
      <span className="truncate font-medium text-sm">photos/sunset.jpg</span>
      <FileActions files={files} fileKey="photos/sunset.jpg" />
    </div>
  );
};

export default Example;

Installation

npx shadcn@latest add https://files-sdk.dev/r/file-actions.json

Usage

import { useFiles } from "files-sdk/react";

import { FileActions } from "@/components/files-sdk/file-actions";

export function Row({ fileKey }: { fileKey: string }) {
  const files = useFiles({ endpoint: "/api/files" });

  return <FileActions files={files} fileKey={fileKey} onChanged={() => {}} />;
}

Drop it into a File Browser or File List row. onChanged fires after a successful copy/rename/move/delete so the parent can re-list. Rename edits only the basename and re-attaches the original prefix; Move takes a full destination key.

Props