File List

Lists the objects under a prefix and keeps itself in sync as you mutate them. Images get an inline thumbnail through the gateway download proxy, so it works on every adapter — even ones that can't mint a public URL.

"use client";import { useFiles } from "files-sdk/react";import { FileList } from "@/components/files-sdk/file-list";const Example = () => {  const files = useFiles({ endpoint: "/api/files" });  return <FileList files={files} prefix="photos/" />;};export default Example;

Installation

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

pnpm dlx shadcn@latest add https://files-sdk.dev/r/file-list.json

bunx --bun shadcn@latest add https://files-sdk.dev/r/file-list.json

Usage

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

import { FileList } from "@/components/files-sdk/file-list";

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

  return <FileList files={files} prefix="docs/" />;
}

Delete and download both go through the same files instance you pass in, so ambient error state stays consistent. The component owns its own list state (a files.list() call on mount) — for shared, cached listing bring useList instead.

Props