Dropzone

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 { useFiles } from "files-sdk/react";import {  Dropzone,  DropzoneContent,  DropzoneEmptyState,} from "@/components/files-sdk/dropzone";const Example = () => {  const files = useFiles({ endpoint: "/api/files" });  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

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

bunx --bun 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.