{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-upload-03",
  "type": "registry:block",
  "title": "File Upload Multi-File Dropzone",
  "description": "A file upload multi-file dropzone block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "select",
    "separator"
  ],
  "dependencies": [
    "lucide-react",
    "react-dropzone"
  ],
  "files": [
    {
      "path": "content/components/file-upload/file-upload-03.tsx",
      "type": "registry:component",
      "target": "components/file-upload-03.tsx",
      "content": "'use client';\n\nimport { File, Trash } from 'lucide-react';\nimport React from 'react';\nimport { useDropzone } from 'react-dropzone';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\nimport { cn } from '@/lib/utils';\n\nexport default function FileUpload03() {\n  const [files, setFiles] = React.useState<File[]>([]);\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({\n    onDrop: (acceptedFiles) => setFiles(acceptedFiles),\n  });\n\n  const filesList = files.map((file) => (\n    <li className=\"relative\" key={file.name}>\n      <Card className=\"relative p-4 shadow-none\">\n        <div className=\"-translate-y-1/2 absolute top-1/2 right-4\">\n          <Button\n            aria-label=\"Remove file\"\n            onClick={() =>\n              setFiles((prevFiles) =>\n                prevFiles.filter((prevFile) => prevFile.name !== file.name)\n              )\n            }\n            size=\"icon\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            <Trash aria-hidden={true} className=\"h-5 w-5\" />\n          </Button>\n        </div>\n        <CardContent className=\"flex items-center space-x-3 p-0\">\n          <span className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted\">\n            <File aria-hidden={true} className=\"h-5 w-5 text-foreground\" />\n          </span>\n          <div>\n            <p className=\"text-pretty font-medium text-foreground\">\n              {file.name}\n            </p>\n            <p className=\"mt-0.5 text-pretty text-muted-foreground text-sm\">\n              {file.size} bytes\n            </p>\n          </div>\n        </CardContent>\n      </Card>\n    </li>\n  ));\n\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <Card className=\"shadow-none sm:mx-auto sm:max-w-xl\">\n        <CardHeader>\n          <CardTitle>Set up your first cloud storage</CardTitle>\n          <CardDescription>\n            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form action=\"#\" method=\"post\">\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-6\">\n              <div className=\"col-span-full sm:col-span-3\">\n                <Label className=\"font-medium\" htmlFor=\"bucket-name\">\n                  Bucket name\n                </Label>\n                <Input\n                  className=\"mt-2\"\n                  id=\"bucket-name\"\n                  name=\"bucket-name\"\n                  placeholder=\"Bucket name\"\n                  type=\"text\"\n                />\n              </div>\n              <div className=\"col-span-full sm:col-span-3\">\n                <Label className=\"font-medium\" htmlFor=\"visibility\">\n                  Visibility\n                </Label>\n                <Select\n                  defaultValue=\"private\"\n                  disabled\n                  items={{ private: 'Private', public: 'Public' }}\n                >\n                  <SelectTrigger\n                    className=\"mt-2 w-full\"\n                    id=\"visibility\"\n                    name=\"visibility\"\n                  >\n                    <SelectValue placeholder=\"Select visibility\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"private\">Private</SelectItem>\n                    <SelectItem value=\"public\">Public</SelectItem>\n                  </SelectContent>\n                </Select>\n                <p className=\"mt-2 text-pretty text-muted-foreground text-sm\">\n                  Only admins can change visibility.\n                </p>\n              </div>\n              <div className=\"col-span-full\">\n                <Label className=\"font-medium\" htmlFor=\"file-upload-2\">\n                  File(s) upload\n                </Label>\n                <div\n                  {...getRootProps()}\n                  className={cn(\n                    isDragActive\n                      ? 'border-primary bg-primary/10 ring-2 ring-primary/20'\n                      : 'border-border',\n                    'mt-2 flex justify-center rounded-md border border-dashed px-6 py-20 transition-colors duration-200'\n                  )}\n                >\n                  <div>\n                    <File\n                      aria-hidden={true}\n                      className=\"mx-auto h-12 w-12 text-muted-foreground/80\"\n                    />\n                    <div className=\"mt-4 flex text-muted-foreground\">\n                      <p>Drag and drop or</p>\n                      <label\n                        className=\"relative cursor-pointer rounded-sm pl-1 font-medium text-primary hover:text-primary/80 hover:underline hover:underline-offset-4\"\n                        htmlFor=\"file\"\n                      >\n                        <span>choose file(s)</span>\n                        <input\n                          {...getInputProps()}\n                          className=\"sr-only\"\n                          id=\"file-upload-2\"\n                          name=\"file-upload-2\"\n                          type=\"file\"\n                        />\n                      </label>\n                      <p className=\"text-pretty pl-1\">to upload</p>\n                    </div>\n                  </div>\n                </div>\n                <p className=\"mt-2 text-pretty text-muted-foreground text-sm leading-5 sm:flex sm:items-center sm:justify-between\">\n                  <span>All file types are allowed to upload.</span>\n                  <span className=\"pl-1 sm:pl-0\">Max. size per file: 50MB</span>\n                </p>\n                {filesList.length > 0 && (\n                  <>\n                    <h4 className=\"mt-6 text-balance font-medium text-foreground\">\n                      File(s) to upload\n                    </h4>\n                    <ul className=\"mt-4 space-y-4\" role=\"list\">\n                      {filesList}\n                    </ul>\n                  </>\n                )}\n              </div>\n            </div>\n            <Separator className=\"my-6\" />\n            <div className=\"flex items-center justify-end space-x-3\">\n              <Button type=\"button\" variant=\"outline\">\n                Cancel\n              </Button>\n              <Button type=\"submit\">Upload</Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "file-upload"
  ]
}