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.
photos/sunset.jpg
"use client";import { useFiles } from "files-sdk/react";import { FileActions } from "@/components/files-sdk/file-actions";const Example = () => { const files = useFiles({ endpoint: "/api/files" }); return ( <div className="flex items-center justify-between rounded-lg border border-border p-3"> <span className="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.jsonpnpm dlx shadcn@latest add https://files-sdk.dev/r/file-actions.jsonbunx --bun shadcn@latest add https://files-sdk.dev/r/file-actions.jsonUsage
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
Prop
Type