{
  "name": "file-upload-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react",
    "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\";\nimport { Button } from \"@/registry/bases/base/ui/button\";\nimport {\n  FileUpload,\n  FileUploadDropzone,\n  FileUploadItem,\n  FileUploadItemDelete,\n  FileUploadItemMetadata,\n  FileUploadItemPreview,\n  FileUploadList,\n  FileUploadTrigger,\n} from \"@/registry/bases/base/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=\"font-medium text-sm\">Drag & drop files here</p>\n          <p className=\"text-muted-foreground text-xs\">\n            Or click to browse (max 2 files, up to 5MB each)\n          </p>\n        </div>\n        <FileUploadTrigger\n          render={(props) => (\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"mt-2 w-fit\"\n              {...props}\n            >\n              Browse files\n            </Button>\n          )}\n        />\n      </FileUploadDropzone>\n      <FileUploadList>\n        {files.map((file, index) => (\n          <FileUploadItem key={index} value={file}>\n            <FileUploadItemPreview />\n            <FileUploadItemMetadata />\n            <FileUploadItemDelete\n              render={(props) => (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-7\"\n                  {...props}\n                >\n                  <X />\n                </Button>\n              )}\n            />\n          </FileUploadItem>\n        ))}\n      </FileUploadList>\n    </FileUpload>\n  );\n}\n",
      "target": ""
    }
  ]
}