{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "manual-multiple-image-upload-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/multiple-image-upload"
  ],
  "files": [
    {
      "path": "registry/example/manual-multiple-image-upload-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMultipleFileUpload } from \"@/hooks/use-multiple-file-upload\"\nimport { Button } from \"@/components/ui/button\"\n\nimport {\n  FileState,\n  MultiImageDropzone,\n} from \"@/components/multiple-image-upload\"\n\nexport default function ManualMultipleImageUploadDemo() {\n  const [fileStates, setFileStates] = React.useState<FileState[]>([])\n  const { uploadMultipleFiles, uploadProgress, isUploading, error } =\n    useMultipleFileUpload({\n      onSuccess: (urls) => {\n        console.log(\"Successfully uploaded files:\", urls)\n      },\n      onError: (error) => {\n        console.error(\"Upload error:\", error)\n      },\n    })\n\n  // Update file progress based on upload progress\n  React.useEffect(() => {\n    if (uploadProgress.length) {\n      setFileStates((fileStates) => {\n        const newFileStates = structuredClone(fileStates)\n        uploadProgress.forEach(({ key, progress }) => {\n          const fileState = newFileStates.find(\n            (fileState) => fileState.key === key\n          )\n          if (fileState) {\n            fileState.progress = progress\n          }\n        })\n        return newFileStates\n      })\n    }\n  }, [uploadProgress])\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl md:px-10\">\n      <MultiImageDropzone\n        value={fileStates}\n        dropzoneOptions={{\n          maxFiles: 6,\n          maxSize: 1024 * 1024 * 1, // 1 MB\n        }}\n        disabled={isUploading}\n        height=\"300px\"\n        displayMode=\"list\"\n        onChange={setFileStates}\n        onFilesAdded={async (addedFiles) => {\n          setFileStates([...fileStates, ...addedFiles])\n        }}\n      />\n      <Button\n        className=\"mt-2\"\n        onClick={() => {\n          const pendingFiles = fileStates\n            .filter(\n              (fileState) =>\n                fileState.progress === \"PENDING\" &&\n                typeof fileState.file !== \"string\"\n            )\n            .map((fileState) => ({\n              key: fileState.key,\n              file: fileState.file as File,\n            }))\n\n          uploadMultipleFiles(pendingFiles)\n        }}\n        disabled={\n          isUploading ||\n          !fileStates.filter((fileState) => fileState.progress === \"PENDING\")\n            .length\n        }\n      >\n        Upload\n      </Button>\n      {error && <div className=\"mt-2 text-sm text-red-500\">{error}</div>}\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/manual-multiple-image-upload-demo.tsx"
    }
  ],
  "type": "registry:example"
}