File List

A list of stored files with thumbnails, size and type, plus download and delete — driven by useFiles.

Lists the objects under a prefix. It lists on mount and on Refresh, and drops a row after its own delete — changes made elsewhere show up on the next refresh. Images get an inline thumbnail from a signed URL when the adapter can mint one, falling back to the gateway download proxy otherwise, so thumbnails work on every adapter.

"use client";

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

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

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

export default Example;

Installation

npx 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; a failed delete or download is also shown above the list. The component owns its own list state (a files.list() call on mount) — for shared, cached listing bring useList instead.

Props