{
  "name": "file-upload-demo",
  "type": "registry:example",
  "dependencies": [
    "sonner"
  ],
  "registryDependencies": [
    "button",
    "file-upload"
  ],
  "files": [
    {
      "path": "examples/file-upload-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Upload, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  FileUpload,\n  FileUploadDropzone,\n  FileUploadItem,\n  FileUploadItemDelete,\n  FileUploadItemMetadata,\n  FileUploadItemPreview,\n  FileUploadList,\n  FileUploadTrigger,\n} from \"@/registry/bases/radix/ui/file-upload\";\n\nexport default function FileUploadDemo() {\n  const [files, setFiles] = React.useState<File[]>([]);\n\n  const onFileReject = React.useCallback((file: File, message: string) => {\n    toast(message, {\n      description: `\"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}\" has been rejected`,\n    });\n  }, []);\n\n  return (\n    <FileUpload\n      maxFiles={2}\n      maxSize={5 * 1024 * 1024}\n      className=\"w-full max-w-md\"\n      value={files}\n      onValueChange={setFiles}\n      onFileReject={onFileReject}\n      multiple\n    >\n      <FileUploadDropzone>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <div className=\"flex items-center justify-center rounded-full border p-2.5\">\n            <Upload className=\"size-6 text-muted-foreground\" />\n          </div>\n          <p className=\"text-sm font-medium\">Drag & drop files here</p>\n          <p className=\"text-xs text-muted-foreground\">\n            Or click to browse (max 2 files, up to 5MB each)\n          </p>\n        </div>\n        <FileUploadTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"mt-2 w-fit\">\n            Browse files\n          </Button>\n        </FileUploadTrigger>\n      </FileUploadDropzone>\n      <FileUploadList>\n        {files.map((file, index) => (\n          <FileUploadItem key={index} value={file}>\n            <FileUploadItemPreview />\n            <FileUploadItemMetadata />\n            <FileUploadItemDelete asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-7\">\n                <X />\n              </Button>\n            </FileUploadItemDelete>\n          </FileUploadItem>\n        ))}\n      </FileUploadList>\n    </FileUpload>\n  );\n}\n",
      "target": ""
    }
  ]
}