Dropzone

A drag-and-drop (or click) upload area wired to useFiles - streams bytes straight to your gateway, with composable empty and uploaded states.

A compound dropzone that uploads through a useFiles instance. Drag files in or click to open the picker; bytes stream straight to your gateway.

"use client";

import { demoFiles } from "@/lib/demo-files";
import {
  Dropzone,
  DropzoneContent,
  DropzoneEmptyState,
} from "@/registry/files-sdk/dropzone/dropzone";

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

  return (
    <Dropzone accept="image/*" files={files} prefix="demo/">
      <DropzoneEmptyState />
      <DropzoneContent />
    </Dropzone>
  );
};

export default Example;

Installation

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

Usage

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

import {
  Dropzone,
  DropzoneContent,
  DropzoneEmptyState,
} from "@/components/files-sdk/dropzone";

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

  return (
    <Dropzone accept="image/*" files={files} prefix="docs/" maxFiles={5}>
      <DropzoneEmptyState />
      <DropzoneContent />
    </Dropzone>
  );
}

DropzoneEmptyState renders the prompt until something uploads; DropzoneContent renders the result afterwards. Pass your own children to either to override the default look.

Props

<Dropzone>

<DropzoneEmptyState> and <DropzoneContent> each accept className and children to override the default look.